divコンテナはどのように反応しますか？

Question

CSS3ファイルに背景画像が割り当てられたdivがあります。 画像は応答性があり、画面サイズに応じて縮尺が変わりますが、コンテナはすべての画面サイズで高さを維持します。

コンテナを背景画像と同様に反応させる方法があるかどうかを知る必要があります。

HTML：

<div class="responsive> </div> 

CSS3：

.responsive { 
    background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top; 
    border: 1px solid red; 
    background-size: contain; 
    width: 100%; 
    height: 270px; 
} 

私は、背景画像選択なしのimgのsrcタグを使用する必要があります。 ここにはfiddle fileがあります。

ありがとうございます。

Answer 1

これは、一定の割合で保持したい要素内に追加のダミー要素を追加することができます。パディングトップまたはパディングボトムをパーセンテージとして指定した場合は、コンテナエレメントの幅になります。これにより、コンテナエレメントの高さが固定されたままになります。

<div id="responsive"> 
    some text 
    <div id="dummy"></div> 
</div> 

CSS：

#responsive { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top; 
    background-size: contain; 
} 

#dummy { 
    padding-top: 29%; 
} 

実施例：

https://jsfiddle.net/098jj61q/

クレジット：

何に応答

• http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

• http://alistapart.com/article/creating-intrinsic-ratios-for-video

Answer 2

はい正しいです。 @Paulie_Dによれば、あなたはあなたの要求に応じて、imgタグだけを使って、それを行うことができます背景画像でそれを行うことはできません。

あなたは、同じようにブロック要素としてそれを処理することにより、対応する画像を作るのdivを使用せずに、

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

をしなければならないか、背景画像に分裂を使用するように主張するならば、backgoundの画像をカバーする何

div.mydiv { 
    background:url(background_image.jpg); 
    background-repeat:no-repeat !important; 
    background-size: cover !important; 
    background-position:center center !important; 
    min-height:300px; 
}