Die Seite ist nur lokal... es gibt von daher leider keinen Link
Beiträge von Simuletsplay
-
-
Hallo zusammen, ich habe folgende Seite:
HTML
Alles anzeigen<html> <head> <title>TITEL</title> <meta charset="utf-8"> <meta name="viewport" content="width=1280, user-scalable=no" /> <script src="/libs/qimessaging/1.0/qimessaging.js"></script> <script src="lib/js/jquery-3.3.1.min.js"></script> </head> <style> @font-face { font-family: 'OpenSans'; src: url(lib/fonts/OpenSans-Regular.ttf); } @font-face { font-family: 'OpenSansBold'; src: url(lib/fonts/OpenSans-Bold.ttf); } body { padding: 0; margin: 0; font-family: OpenSans; } .header { height: 25%; width: 100%; background-image: url('lib/img/hintergrundbild_1.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; padding-left: 50px; } .title { font-size: 55pt; font-family: OpenSansBold; color: #fff; position: absolute; bottom: 10px; left: 50px; } .content { font-size: 16pt; padding-left: 50px; padding-right: 50px; background-image: url('lib/img/hintergrundbild_2.png'); background-size: contain; height: 75%; width: auto; } .row{ margin-top: 40px; width: auto; } .headline { font-size: 20pt; color: #004969; } .button { padding: 10px 30px 10px 30px; border-radius: 0; background-color: #fff; border: 1px solid; border-color: #000; font-size: 16pt; } .button-red { color: #CC3300; border-color: #CC3300; } .button-blue { color: #004969; border-color: #004969; } .button-right { float: right; } .info-text { margin-top: 10px; color: #004969; font-size: 14pt; } .info-text ul{ margin-top: 0px; } </style> <body> <div class="header"> <!-- <div class="text"> --> <div class="title"> Seitentitel </div> <!-- </div> --> </div> <div class="content"> <div class="row"> <button class="button button-red button-right">Button 1</button> </div> <div class="row"> <span class="headline">Überschrift</span> <div class="button-group"> <button class="button button-blue">Button 2</button> <button class="button button-blue">Button 3</button> <button class="button button-blue">Button 4</button> <button class="button button-blue">Button 5</button> </div> </div> <div class="row"> <span class="headline">Überschrift</span> <div class="button-group"> <button class="button button-blue">Button 6</button> <button class="button button-blue">Button 7</button> </div> </div> <div class="row"> <span class="headline">Überschrift</span> <div class="info-text"> Text <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul> </div> </div> </div> </body> </html>Das Display, auf dem die Seite geladen wird hat 1200x800px (oder 1280x800) Pixel.
Die beiden Hintergrundbilder sindbreite x 200px
breite x 600px breit.
Ich habe es bereits mit beiden Größen ausprobiert. Jedoch sind bei beiden Größen unterhalb und rechts neben dem eigentlichen Bereich noch leere Bereiche, die dadurch das Scrollen möglich machen und die Darstellung leicht verfälschen.
Das ist rechts unten. Wie zu sehen wird das Handy-Mockup nicht bis zum Rand angezeigt.
Aber eigentlich ragt das obere Bild einfach zu weit rüber.
NICHT WUNDERN: Das Handy wäre sowieso nicht komplett angezeigt worden. Aber die Schnittkante beim Handy ist automatisch auch Bildschirm-Ende!
Kann mir dabei jemand helfen?
Viele Grüße
Ben
-
Das heißt, Du willst nicht, dass kleine Bilder herauf skaliert werden?
Ja genau!
Sonst werden die warum auch immer in die Weite gezogen, so dass die Höhe auf die (bisher) Pixel-Angabe, die ich vorgeben musste, damit es funktioniert.
Immerhin hat es dort mit den Bildern funktioniert, die größer waren.
Also Beispiel: Die Angabe war 1920x1080 px. Dann wurden die kleinen Bilder (1634x613) auf eine Höhe skaliert, dass diese 1080 beträgt - passend dazu auch die Weite, aber es wurde natürlich auch viel weg geschnitten. In diesem Fall müsste die Weite des Bildes "abgeschnitten" werden. So, dass das Bild 1090x613 px groß ist. Dann ist es im 16:9 Format!
-
Dann muss entschieden werden, ob die Bilder, die ein anderes Seitenverhältnis haben, mit Rändern angezeigt werden sollen oder ob Teile des Bildes abgeschnitten werden sollen.
Ja die können ruhig abgeschnitten werden.
Verzerrt am besten nicht...
-
Hallo zusammen,
ich habe bei mir das Problem in der Diashow, dass nicht alle Bilder im 16:9 Format sind.
Von daher brauche ich eine Möglichkeit, dass ich alle Bilder mithilfe von CSS in dieses Format bekomme.
Problem an der ganzen Sache ist, dass auch relativ kleine Bilder dabei sind.
Bei meinem Versuch wurden diese dann auf die Weite gestreckt.
CSSimg { width: 1920px; height: 1080px; object-fit: cover; }Also bisher kenne ich da keine Möglichkeit als irgendwelche komplizierten Rechnungen...
Wer kann mir helfen?
Grüße
Ben
-
Also in der Datei gibt es gar keine 425 Zeilen...
Also die Bilder sind erstmal nicht das Problem, die werden im 1:1 Format hochgeladen!
Viel eher ist es, dass die durch die unterschiedliche Länge der Texte automatisch höher werden und dadurch ja auch breiter.
Daher brauche ich irgendwas, dass alle Divs dieser Klasse gleich hoch sind und sich dann am größte orientieren.
-
Hallo Zusammen,
Ich habe folgendes Problem:
Ich habe 8 Divs, die untereinander sind, wo etwas vorgestellt wird.
Dort habe ich jetzt in dem Text-Bereich unterschiedlich lange Texte. Direkt nebenan ein Bild.
PROBLEM: Alle Bilder müssen gleich groß ausgegeben werden.
Die Seite ist aktuell folgende:
https://projekt-x-treme.de/index3.php
HTML
Alles anzeigen<div height="100px" class="row pt-3 scroll-element"> <div class="col-4 mr-0"> <img class="d-block w-auto h-100" src="/style/img/serv-1.png"> </div> <div class="col-8 bg-light mr-0 ml-0 p-3 text-dark"> <h3><small><small><span class="font-weight-light"></span></small></small></h3> <p></p> IG Admins: <h6 class="font-weight-light">ServerID: #01</h6> <h6 class="font-weight-light text-right">Stand: 09.01.2020</h6> </div> <!-- FÜR JEDEN 2. DIV <div class="col-4 pl-0 ml-0"> <img class="d-block w-auto h-100" src="/style/img/serv-1.png"> </div> --> </div>Dort sind die Container alle unterschiedlich hoch und unterschiedlich breit.
Wie bekomme ich das hin, trotz dessen, dass alle Texte inhaltlich unterschiedlich lang sind?
Grüße
Ben
