Gerd: Bild ragt aus Container 100% Breit, 400px hoch

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

  1. 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

    1. 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?

      1. 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

        1. 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.

          1. 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

          2. PS:

            Dann müsstest du natürlich auch schreiben   img { transform: rotateX(180deg); }   damit es wieder richtig herum ist ;-)

            Gruß

            var

            1. @@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)
              1. 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
                
              2. 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>

                1. header { positon: relative } ?

                  Gruß

                  var

                2. @@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)
                  1. Ich hoffe das ist das richtige zum Online testen

                    http://jsfiddle.net/27shjye5/

                    1. 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:(
                      1. @@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)
                        1. 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

                          1. @@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)
                            1. 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....

      2. @@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)