actionbrowser.com
Aber wie schon gesagt: die erste ist nich brauchbar. Overflow ist besser. Viel Spa noch so. Mister 6 Geschrieben von: Crepax, am 06. 05. 2011 um 09:27 Vielen Dank:D hat mir sehr geholfen und viel arbeit erspart! 7 Geschrieben von: moprivat, am 22. 09. 2011 um 09:32 Du kannst auch fr das Bild eine Art negativen Zoom nutzen, den man einfach durch das Hinzufgen einer festen Gre z. der Hhe realisiert und die Breite auf Auto stellt. Dieses eignet sich gut, um mit dem Originalbild Thumbs herzustellen. In diesem Fall ist dann die Hhe 100px, da sie im Div bereits vordefiniert wurde. Durch den overflow wird alles darber hinaus abgeschnitten: img { width: auto; height: 100px;} Bei groen Bildern sollte man jedoch aufgrund der Ladezeiten daon absehen oder nur PNG oder GIF verwenden. 8 Geschrieben von: Zasa, am 26. 02. 2012 um 15:35 Hallo, danke fr die super Lsung mit den Containern. Jedoch kann ich nun nicht mehr per Javascript die Bildposition ndern. Woran knnte das liegen? Css bild größe english. Letzte Aktualisierung ( Dienstag, 1. April 2008)
Eine automatische Höhenanpassung wie bei Bildern height:auto ist nicht möglich. Css bild größe google. Youtube Video 100% Breite zum Bildschirm / Höhe ermitteln
Das Seitenverhältnis des Videos ist 560 x 315
315/560 =
0, 562;
0, 562 * 100 = 56;
Die Höhe ist 56% zur Breite, der Wert vw ist die Bildschirmbreite
width und height Attribute müssen aus html entfernt werden
width="560" height="315"
body{margin: 0;}
iframe{
display: block;
width: 100vw; height: 56vw;}
Youtube-Video / Iframe 100% Breite zum Elternelement / Höhe ermitteln
Für das folgende Beispiel muss man das prozentuale Höhe zur Breite des Videos ausrechnen. Zum Beispiel, wenn das Seitenverhältnis des Videos 560 x 315 ist
0, 562 * 100 = 56, 2;
Die Höhe ist ungefähr 56% zur Breite
Diese porzentuale Höhe wird dem padding-bottom des #iframe-container Elements zugewiesen. Man beachte die Verschachtelung in 3 Stufen: main, #iframe-container, iframe
main{
max-width: 800px;
margin: auto;
border: 1px solid #000;}
#iframe-container {
position: relative;
padding-bottom: 56%;
overflow: hidden;}
#iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;}