Duyarlı görüntüyü uygun hale getirin Üst kapsayıcı

Question

Banner'ımdaki görüntünün resmin üstünü aşmamasını sağlamak için tam bir CSS çözümü olup olmadığını anlamaya çalışıyorum ancak resmin oranını koru.

Burada bir demo görebilirsiniz

: http://jsfiddle.net/LkxYU/1/

html:

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

css:

Amacım her zaman görüntüyü% 100, ama asla aşağıda 300px yılında sahip olmaktır

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

.banner_holder img{ 
    width: 100%; 
} 

yükseklik. Bu görüntü cutoff istemem ama thats ince olur, ben sadece saf CSS çözüm olup olmadığını bilmek istiyorum, yoksa ben jQuery

Answer 1

yerine bir < img> etiketini kullanarak, o görüntü bir div için arka plan görüntüsü yapılmış ve aşağıdaki stilleri verdi: Ben keman kullanıyordum oluyor burada

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

: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

-

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

: İşte tam HTML ve CSS bulunuyor

.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

deneyin kullanmanız gerekiyorsa:

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

Answer 3

Kullanım max-height ve MAX-

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

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

EDIT:: genişlik o görüntü her zaman üst div uyacak emin olmak için Üzgünüm, bölümüatlamanı yaklaşık 300px kesme şeyler yazdığı yer :) MathiasaurusRex cevabı doğrudur.

Answer 4

Resminiz kaçınılmaz ekran boyutuna bağlı olarak oran çıkacak, neden bir arka plan görüntüsü deneyin:

.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; 
} 

veya sadece resim etiketinizde maksimum yükseklik ekleyebilirsiniz:

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