親コンテナのサイズが変更された場合、画像のコンテナは柔軟ではありません

Question

最初から始めます。私は応答性の高いウェブサイトを作成します。そこには高さが変わる要素があります。そこには、新しい要素を関連付けるためにコンテナを作成しなければならなかった画像があります。残念ながら、サイズ変更後（電話をかけるなど）、コンテナは画像とともに幅を変更しません。パラメータの値をリフレッシュすると（たとえば、「inspect要素」で「表示」を削除して追加する）、既に正しく設定されています。この問題を解決するには？私はdiv要素にIMG代わり

.my-container-div 
{ 
    background-image: zoom 
} 

を使用

var i = 0; 
 
$('button').on('click', function() { 
 
    if (i%2) $('.background').css('height', '200px'); 
 
    else $('.background').css('height', '300px');i++; 
 
});

.background { 
 
    width: 600px; 
 
    height: 200px; 
 
    background-color: black; 
 
    transition: 0.3s; 
 
} 
 

 
.background > .container { 
 
    height: 100%; 
 
    display: inline-block; 
 
    background-color: white; 
 
} 
 

 
.background > .container > img { 
 
    height: 100%; 
 
    opacity: 0.7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="background"> 
 
    <div class="container"> 
 
    <img src="https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg"> 
 
    </div> 
 
</div> 
 

 
<br><br> 
 

 
<button>Change</button>

Answer 1

ため

var i = 0; 
 
$('button').on('click', function() { 
 
    if (i%2) $('.background').css('height', '200px'); 
 
    else $('.background').css('height', '300px');i++; 
 
});

.background { 
 
    width: 600px; 
 
    height: 200px; 
 
    color: white; 
 
    background-color: black; 
 
    transition: 0.3s; 
 
} 
 

 
.background > .container { 
 
    display: inline; 
 
} 
 

 
.background > .container > img { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="background"> 
 
    <div class="container"> 
 
    <img src="https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg"> 
 
    </div> 
 
    <span>I move too....</span> 
 
</div> 
 
<br><br> 
 
<button>Change</button>

Answer 2

。

.background > .container { 
    height: 100%; 
    width: 100%; 
    background-image: url("https://i.ytimg.com/vi/bVzpweTJvhc/hqdefault.jpg"); 
    background-size: cover;  
} 

Answer 3

あなたcontainerクラスと画像：これで、あなたは

など... div要素とその背景のプロパティ、背景サイズ、背景の位置で

を再生することができます私はこのような何かをしたいですそれらのためにwidthが定義されていません。それが理由です。与えるあなたのcontainer（まだ、私はなぜ知らない...）width:50%とそれが動作inlineとしてcontainerが表示されている画像width:100%