nicht angemeldet
Bild ragt aus Container 100% Breit, 400px hoch
0 0 0 0 0 0 0 
Gunnar Bittersmann
0 0 0 0 Gunnar Bittersmann
0 Gunnar Bittersmann
Bild ragt aus Container 100% Breit, 400px hoch
Der MartinIch habe einen Container in diesem soll ein Bidl erscheinen. es soll immer so Breit sein wie der Container, also die Breite des Browsers, aber die Höhe sollte FIX sein.
Mein Bild ragt aber aus dem Container, wie kann ich soetwas beheben?
Ich habe
Gerd
.container {
width:100%;
height:400px;
background:#000;
}
img {
width: 100%;
height: auto;
}
<div class="container">
<img src="pic100.jpg">
</div>
-
Hallo Gerd
Du hast für den container ja schon die Vorgaben umgesetzt, nämlich width: 100%; und height: 400px;
Wenn du willst, dass das img den container immer komplett ausfüllt, musst du schreiben img { width: 100%; height: 100%; }
height: auto; passt in diesem Fall nur die Höhe an die Breite des Bildes an, nicht aber das Bild an die Höhe des containers.
height: 100%; bestimmt, dass das element 100% der Höhe des Elternelementes einnimmt, in diesem Fall also der container.
Gruß
var
-
Wenn du willst, dass das img den container immer komplett ausfüllt, musst du schreiben img { width: 100%; height: 100%; }
Aber wenn ich es so mache, verzerrt es das Bild total, wie bekoee ich es so hin, das er zwar die Breite ausfüllt, aber das bild dann so abschneidet... so das es passend ist?
-
Hallo Gerd
Wenn du willst, dass das img den container immer komplett ausfüllt, musst du schreiben img { width: 100%; height: 100%; }
Aber wenn ich es so mache, verzerrt es das Bild total, wie bekoee ich es so hin, das er zwar die Breite ausfüllt, aber das bild dann so abschneidet... so das es passend ist?
Naja, dass das Bild in der Breite verzerrt wird ist ja klar, wenn du hier keine fixen Angaben machst, sondern den Wert prozentual bestimmst.
Du könntest aber mal schreiben: container { overflow: hidden; } und img { height: auto; }
Gruß
var
-
container { overflow: hidden; } und img { height: auto; }
fast perfekt, jett müsste ich nur noch das Bild ausrichten das es unten anliegt und nach oben geschoben wird.
-
Hallo Gerd
fast perfekt, jett müsste ich nur noch das Bild ausrichten das es unten anliegt und nach oben geschoben wird.
Versuch mal container { transform: rotateX(180deg); }
Gruß
var
-
PS:
Dann müsstest du natürlich auch schreiben img { transform: rotateX(180deg); } damit es wieder richtig herum ist ;-)
Gruß
var
-
@@var:
nuqneH
Dann müsstest du natürlich auch schreiben img { transform: rotateX(180deg); } damit es wieder richtig herum ist ;-)
Nicht die beste Idee, den Browser unnötig viel(!) rechnen zu lassen.
.container { position: relative } .container img { position: absolute; bottom: 0 }Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
nuqneH
Hallo Gunnar
Nicht die beste Idee, den Browser unnötig viel(!) rechnen zu lassen.
Stimmt.
.container { position: relative }
.container img { position: absolute; bottom: 0 }
Dann würde ich aber empfehlen, zusätzlich die Angabe `left: 0`{:.language-css} reinzuschreiben. Gruß var -
Jetzt geht es fast,
doch wenn ich oberhalb noch einen header habe, ist dieser weg.header{
width:100%;
height:200px;
background:#000;
}
.container {
width:100%;
height:400px;
position: relative;
}
img {
min-width: 100%;
min-height: 100%;
position: absolute;
bottom: 0 ;
}
</style></head>
<body>
<div class="header">hallo</div>
<div class="container">
<img src="pic100.jpg">
</div>-
header { positon: relative } ?
Gruß
var
-
@@Gerd:
nuqneH
doch wenn ich oberhalb noch einen header habe, ist dieser weg.
Das kommt mir doch bekannt vor.
Ansonsten: Online-Beispiel, bitte.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Ich hoffe das ist das richtige zum Online testen
http://jsfiddle.net/27shjye5/
-
Hallo,
Ich hoffe das ist das richtige zum Online testen
http://jsfiddle.net/27shjye5/ja, prächtig. Damit kann man was anfangen.
Wenn du es jetzt auch noch verlinkt hättest ...Also, klarer Fall: Deine beiden div-Container sind genau da, wo du sie haben willst. Das Bild ist aber höher als 400px und ragt deshalb aus seinem Elternelement heraus - und zwar nach oben, weil du es ja bündig an die Unterkante positioniert hast.
Abhilfe: overflow:hidden für das Elternelement.
Ciao,
Martin--
Die letzten Worte des Fallschirmspringers:
ELENDE SCHEISSMOTTEN!!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
ja, prächtig. Damit kann man was anfangen.
Gut ja, prächtig nein. JSFIddle mag gut für JS-Probleme sein (wer hätte das angesichts des Namens gedacht?), für CSS-Probleme nicht so, weil Änderungen nicht übernommen werden, sonden erst beim Click auf [► Run].
Für CSS sind Dabblet und Codepen besser geeignet.
Abhilfe: overflow:hidden für das Elternelement.
Sagte ich doch. Und wies nochmal drauf hin. Gerd ist scheinbar unfähig, Links zu folgen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Sagte ich doch. Und wies nochmal drauf hin. Gerd ist scheinbar unfähig, Links zu folgen.
Sorry, aber aus denen wurde ich nicht schlau. Aber ich werde versuche mich zu bessern.
Aber danke-
@@Gerd:
nuqneH
Sagte ich doch. Und wies nochmal drauf hin. Gerd ist scheinbar unfähig, Links zu folgen.
Sorry, aber aus denen wurde ich nicht schlau.
Was genau hast du an „Die umgebende Box bräuchte natürlich Breiten- und Höhenangabe und
overflow: hidden“ nicht verstanden?Aber ich werde versuche mich zu bessern.
Genug Luft nach oben hast du ja. ;-)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Was genau hast du an „Die umgebende Box bräuchte natürlich Breiten- und Höhenangabe und
overflow: hidden“ nicht verstanden?Zum Schluss habe ich es ja kapiert, danke....
-
-
-
-
-
-
-
-
-
-
-
-
@@Gerd:
nuqneH
Aber wenn ich es so mache, verzerrt es das Bild total, wie bekoee ich es so hin, das er zwar die Breite ausfüllt, aber das bild dann so abschneidet... so das es passend ist?
Das kommt mir doch bekannt vor.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-