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

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>