当父母更改尺寸时，图像容器不灵活

Question

我将从头开始。我创建了一个响应式网站，在那里我有一个改变高度的元素。在这张照片中，我不得不创建一个容器，以便能够定位与它有关的新元素。不幸的是，在调整大小后（例如，当您打开手机时） - 容器不会随图像一起改变宽度。如果刷新参数的值（例如，“检查元素”删除并添加“显示”），则它已被正确设置。如何解决这个问题呢？

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

当container显示为inline它的工作（我不知道为什么...但）

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

我用

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

而不是IMG进入一个div。有了这个，你可以用div和它的背景属性，背景大小，背景，地位......等方面发挥

我会做这样的事情：

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

Answer 3

你container类和图像没有任何为他们定义的width。这就是原因。给你一个container和width:50%的对图像width:100%