Html 当父级更改大小时，图像容器不灵活

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

var i=0；
$（'button'）。在（'click'，function（）上{
如果（i%2）$（'.background'）.css（'height'，'200px'）；
else$（'.background'）.css（'height'，'300px'）；i++；
});
.background{
宽度：600px；
高度：200px；
背景色：黑色；
过渡：0.3s；
}
.background>.container{
身高：100%；
显示：内联块；
背景色：白色；
}
.background>.container>img{
身高：100%；
不透明度：0.7；
}




更改我使用的代码

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

您的
容器
类和图像没有为它们定义任何
宽度。这就是原因。给你的
容器
一个
宽度：50%
，当
容器显示为
内联
时，图像的
宽度：100%
（我还不知道为什么…）


var i=0；
$（'button'）。在（'click'，function（）上{
如果（i%2）$（'.background'）.css（'height'，'200px'）；
else$（'.background'）.css（'height'，'300px'）；i++；
});
.background{
宽度：600px；
高度：200px；
颜色：白色；
背景色：黑色；
过渡：0.3s；
}
.background>.container{
显示：内联；
}
.background>.container>img{
身高：100%；
}

我也搬家了。。。。



更改
什么是背景图像：缩放
？图像作为div的背景不会设置尺寸，因此我可以为图像设置其他元素。例如，我想将另一个div设置为距图像右边框20px的边距（位置：绝对；右20px）。您尝试过这个吗。。。除了扭曲图像外，它不起作用。它没有定义宽度，因为它被自动设置为保存图像的比例，并且不会像@LGSon所说的那样扭曲图像。如您所见，高度是定义的。当dome DOM更新时，容器div不会发生任何变化，因为其状态保持不变。图像的大小因其高度属性而改变，并且由于没有宽度属性，它将溢出容器。你可以使用
overflow:hidden
使图像保持在容器内，但对于纯CSS，我想不出一个CSS来制作容器，即图像的大小。那么，如果使用纯CSS，我想不出一个CSS来制作容器，即图像的大小，为什么要发布CSS答案呢？我原以为是这样，但不幸的是没有。如果你添加“背景色：白色”到容器，然后你可以看到图像宽度与容器不同，所以我仍然没有任何关于图像右边缘的参考：（@invicus更新了我的答案这不是一个完美的解决方案，但解决了我的问题，所以谢谢：）