Guten Tag,
ich möchte in meiner rechten Div ein Informations-Panal hinzufügen, welches man mit Bildern jederzeit updaten kann. Die Bilder sollen per Diashow angezeigt werden. Das funktioniert auch alles reibungslos. Mein Problem ist es, das ich das nicht hinbekomme, dass sich die Bilder automatisch an die Fenstergröße skalieren.
Als hilfe, habe ich die Webseite "selfhtml" benutzt. Leider kenn ich mich kaum mit CSS aus. Durch probieren habe ich es nur kleiner bekommen, sodas es von der Breite stimmt, allerdings nicht von der Höhe. Als beispiel habe ich eine PDF-Datei in eine JPG-Datei umgewandelt (online) welches in der Mitte abgetrennt wird. Die Webseite wird in der hälfte getrennt, sodas ich eine linke Div habe und eine rechte.
Anbei zu finden ist der HTML-Code, sowie der CSS-Code (Animation-Code wurde weggelassen).
VG
ich möchte in meiner rechten Div ein Informations-Panal hinzufügen, welches man mit Bildern jederzeit updaten kann. Die Bilder sollen per Diashow angezeigt werden. Das funktioniert auch alles reibungslos. Mein Problem ist es, das ich das nicht hinbekomme, dass sich die Bilder automatisch an die Fenstergröße skalieren.
Als hilfe, habe ich die Webseite "selfhtml" benutzt. Leider kenn ich mich kaum mit CSS aus. Durch probieren habe ich es nur kleiner bekommen, sodas es von der Breite stimmt, allerdings nicht von der Höhe. Als beispiel habe ich eine PDF-Datei in eine JPG-Datei umgewandelt (online) welches in der Mitte abgetrennt wird. Die Webseite wird in der hälfte getrennt, sodas ich eine linke Div habe und eine rechte.
Anbei zu finden ist der HTML-Code, sowie der CSS-Code (Animation-Code wurde weggelassen).
VG
HTML-Code:
<center> <div id="rightdiv"> <h1> Informationen </h> <main> <div id="gallery"> <figure> <img src="/jpg/Bild0.jpg"> </figure> <figure> <img src="/jpg/Bild1.jpg"> </figure> <figure> <img src="/jpg/Bild2.jpg"> </figure> <figure> <img src="/jpg/Bild3.jpg"> </figure> <figure> <img src="/jpg/Bild4.jpg"> </figure> </div> </main> </div> </center>
Code:
main { padding: 0; } #gallery { width: 20em; height: 15em; margin: 0 auto; overflow: hidden; } @media (min-width: 100%) { #gallery { width: 100%; height: 100%; } } @media (max-width: 100%) { #gallery { width: auto; height: auto; } } #gallery figure { position: relative; width: 100%; margin: 0; padding: 0; } #gallery img { width: 100%; margin: 0; padding: 0; }
Kommentar