Machen Sie Antwort Bild passen Eltern Container

Question

Ich habe versucht herauszufinden, ob es eine reine CSS-Lösung, um sicherzustellen, dass das Bild innerhalb meines Banners nicht unter die Höhe der Eltern gehen, sondern das Verhältnis des Bildes zu halten.

Sie eine Demo hier sehen kann: http://jsfiddle.net/LkxYU/1/

html:

<div class="banner_holder"> 
    <img src="http://placekitten.com/g/800/600"/>  
</div> 

css:

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    width: 100%; 
} 

Mein Ziel das Bild immer 100% haben, aber nie unter 300px in Höhe. Dies würde Bild Cutoff bedeuten, aber das ist in Ordnung, ich will nur wissen, ob es eine reine CSS-Lösung ist, oder wenn ich brauche jQuery

Answer 1

Anstatt eine < img> -Tag zu verwenden, habe ich das Bild der Hintergrund-Bild für ein div und gab es die folgenden Arten:

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

hier ist die Geige war ich mit: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

hier ist die komplette HTML und CSS:

<div class="banner_holder"> 
    <div class="banner_holderImage"></div> 
</div> 

-

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holderImage{ 
    height: 100%; 
    position:relative; 
    background: url("http://placekitten.com/g/800/600")no-repeat; 
    background-size: cover; 
    background-position: center; 
} 

Answer 2

Versuch zu verwenden:

.banner_holder img{ 
height: 100%; 
/* OR */ 
height: inherit; 
} 

Answer 3

Verwenden max-height und Max- Breite sicher sein, dass Bild immer das übergeordnete div paßt:

.banner_holder{ 
    width: 200px; 
    height: 300px; 
    position: relative; 
    outline:1px dotted red; 
} 

.banner_holder img{ 
    max-width: 100%; 
    max-height: 100%; 
} 

EDIT: Sorry, ich das Teil vermissen, wo man über 300px cut-off Sachen geschrieben :) MathiasaurusRex Antwort richtig ist.

Answer 4

Ihr Bild wird zwangsläufig aus Verhältnis sein auf dem Bildschirm je nach Größe, warum nicht versuchen, ein Hintergrundbild:

.banner_holder{ 
    width: 100%; 
    height: 300px; 
    min-height: 200px; 
    position: relative; 
    outline:1px dotted red; 
    background: url('http://placekitten.com/g/800/600') center no-repeat; 
    background-size: cover; 
} 

oder Sie könnten nur eine maximale Höhe zu Ihrem Image-Tag hinzu:

.banner_holder img{ 
    width: 100%; 
    max-height: 300px; 
}