Question

我将从头开始。我创建了一个响应式网站，我有一个更改高度的元素。在它的位置是一张图片，我必须创建一个容器，以便能够根据它定位新元素。不幸的是，在调整大小后（例如，当您转动手机时） - 容器不会随图像一起改变宽度。如果刷新参数的值（例如＆＃34;检查元素＆＃34;删除并添加＆＃34;显示＆＃34;），则它已经正确设置。如何解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我用

.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 2

您的container班级和图片没有为其定义任何width。这就是原因。提供container一个width:50%和图片width:100%

Answer 3

当container显示为inline时，它有效（而且我不知道为什么......）

＆＃13;

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

＆＃13;

.background {
  width: 600px;
  height: 200px;
  color: white;
  background-color: black;
  transition: 0.3s;
}

.background > .container {
  display: inline;
}

.background > .container > img {
  height: 100%;
}

＆＃13;

<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>

＆＃13;

父级更改大小

3 个答案: