親画像にフィットするようにする

Question

私のバナー内の画像が親の高さを下回っていないことを保証する純粋なCSSソリューションがあるかどうかを判断しようとしていましたが、

あなたがここにデモを見ることができます：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%; 
} 

を私の目的は、画像に常に100％を持っていることですが、決して以下300ピクセルで高さ。これは、画像のカットオフを意味しますが、細かいthatsのだろう、私はちょうど純粋なCSSのソリューションがあるかどうかを知りたい、または私はjQueryの

Answer 1

代わり< img>タグを使用して、私はその画像のdivの背景イメージ作り、次のスタイルそれを与えた：私はフィドル使っていただここ

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

ここでは、完全なHTMLと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

試して使用する必要がある場合：

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

Answer 3

利用の最大の高さとMAX-を

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

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

EDIT：イメージは、常に親のdivをフィットすることを確認するために幅が申し訳ありませんが、私はあなたがおよそ300ピクセルカットオフのものを書いた部分を欠場:) MathiasaurusRexの答えは正しいです。

Answer 4

あなたのイメージは、必然的に背景画像しようとしない理由は、画面サイズに応じた比率のうち、次のようになります。

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

またはあなたは自分のイメージタグに最大の高さを追加することができた：

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