Director
Hallo,
ich versuche mich gerade im Rahmen meines Studiums an responsive Webdesign und erstelle dazu gerade eine Website, die sich logischerweise in der Größe anpassen soll. Das klappt soweit auch ganz problemlos, allerdings bin ich bei der Verwendung von Bildern auf ein Hindernis gestoßen.
Wenn ich das Browserfenster allerdings verändere, macht die Überschrift die Größenänderung ohne Probleme mit, die Bilder aber nicht. Ziehe ich das Browserfenster kleiner, rutscht das letzte Bild in die nächste Zeile; ziehe ich es größer, bleibt der Raum neben dem letzten Bild weiß.
Was ich erreichen möchte, ist im wesentlichen, dass die Bilder und der graue Balken links und rechts bei jeder Größe bündig abschließen (bei gleichbleibenden Abständen zwischen den Bildern). Dazu müssten die Bilder proportional skaliert werden (verzerren ist natürlich keine Option). Verzerren wäre kein Problem, indem ich den Bildern einfach eine Breite in % geben würde, aber mit der Höhe tue ich mich schwer. Vielleicht stehe ich auch nur auf dem Schlauch? Ich bin mir ziemlich sicher, dass ich keine feste Höhe angeben darf, aber ohne funktioniert momentan gar nichts...
Ich bin mir sicher, dass mir hier jemand helfen kann
Hier nochmal mein aktueller Code:
(HTML)
(CSS)
ich versuche mich gerade im Rahmen meines Studiums an responsive Webdesign und erstelle dazu gerade eine Website, die sich logischerweise in der Größe anpassen soll. Das klappt soweit auch ganz problemlos, allerdings bin ich bei der Verwendung von Bildern auf ein Hindernis gestoßen.
Wenn ich das Browserfenster allerdings verändere, macht die Überschrift die Größenänderung ohne Probleme mit, die Bilder aber nicht. Ziehe ich das Browserfenster kleiner, rutscht das letzte Bild in die nächste Zeile; ziehe ich es größer, bleibt der Raum neben dem letzten Bild weiß.
Was ich erreichen möchte, ist im wesentlichen, dass die Bilder und der graue Balken links und rechts bei jeder Größe bündig abschließen (bei gleichbleibenden Abständen zwischen den Bildern). Dazu müssten die Bilder proportional skaliert werden (verzerren ist natürlich keine Option). Verzerren wäre kein Problem, indem ich den Bildern einfach eine Breite in % geben würde, aber mit der Höhe tue ich mich schwer. Vielleicht stehe ich auch nur auf dem Schlauch? Ich bin mir ziemlich sicher, dass ich keine feste Höhe angeben darf, aber ohne funktioniert momentan gar nichts...
Ich bin mir sicher, dass mir hier jemand helfen kann
Hier nochmal mein aktueller Code:
(HTML)
HTML:
<div id="covers">
<ul>
<li>
<img src="img/215087.jpg" alt="Bla">
</li>
<li>
<img src="img/156651.jpg" alt="Bla">
</li>
<li>
<img src="img/38188.jpg" alt="Bla">
</li>
<li>
<img src="img/913879.jpg" alt="Bla">
</li>
<li>
<img src="img/913879.jpg" alt="Bla">
</li>
</ul>
</div>
(CSS)
HTML:
#covers{margin-top:10px; height:300px;}
#covers ul{height:100%;}
#covers ul li{display:inline-block;
height:99.5%;
}
#covers ul li img{height:100%;
}