Bilder proportional skalieren

[Coulyo]

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)

<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)

#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%;
}

 

[hub]

AW: Bilder proportional skalieren

Moin moin,

nur mal einen Ansatz, sicher nicht perfekt, aber zur Demo sollte es reichen:

#covers {
 margin-top: 10px;
 height: 300px;
}
#covers ul {
 height: 100%;
 list-style: none;
}
#covers ul li {
 float:left;
 width: 19%;
 margin-right: 1%;
}
#covers ul li img {
 width: 100%;
}

Also nicht mit der Höhe, sondern mit der Breite arbeiten und mit float aneinander fügen ...

Gruß Ulli

 

[Coulyo]

AW: Bilder proportional skalieren

Das hat mich auf den richtigen Weg gebracht! Vielen Dank!

 

[hub]

AW: Bilder proportional skalieren

Dann viel Erfolg und noch mehr Spaß

Gruß Ulli