Question

我正在尝试找出一种方法，使图像div具有不同的网络浏览器尺寸（用于移动响应等），并保持3：2的宽高比。我希望能够重新调整我的浏览器窗口大小并使图像始终具有3：2，所以我希望图像高度也可以重新调整大小。

有没有办法用我当前的代码实现这一目标？我也希望能够使蓝色文本div更小而不必使图像更大，因为如果我减少蓝色div的高度百分比，我将不得不增加上面的图片div来弥补100％父元素的高度，但这将抛出图片div的宽高比。

我不知道如何实现这一点，因为它比我想象的更令人困惑。

感谢任何帮助，谢谢...

#bg {
  width: 100%;
  height: 300px;
  background: yellow;
}
#window-container {
  width: 30%;
  height: 200px;
  background: orange;
}
#img {
  background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
  height: 67%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
#text-wrap {
  background: lightblue;
  width: 100%;
  height: 33%;
}

<div id="bg">
  <div id='window-container'>
    <div id='img'></div>
    <div id='text-wrap'>text here</div>
  </div>
</div>

Answer 1

这可能是你想要的吗？

＆＃13;

#bg {
  width: 100%;
  background: yellow;
  display: table;
}
#window-container {
  width: 30%;
  background: orange;
  display: block;
}
img {
  width: 100%;
  height: auto;
}
#text-wrap {
  background: lightblue;
  padding: 10px;
}

＆＃13;

<div id="bg">
  <div id='window-container'>
    <img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
    <div id='text-wrap'>text here</div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用img元素和 Flexbox 执行此操作：

＆＃13;

#bg {
  background: yellow;
}

#window-container {
  display: inline-flex; /* only takes the contents width */
  flex-direction: column; /* stacks children vertically */
  background: orange;
}

#text-wrap {
  background: lightblue;
}

img {
  display: block; /* removes bottom margin/whitespace */
  /*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
  max-width: 100%; /* horizontal responsiveness */
  max-height: 100vh; /* vertical responsiveness */
}

＆＃13;

<div id="bg">
  <div id='window-container'>
    <img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
    <div id='text-wrap'>text here</div>
  </div>
</div>

＆＃13;

保持图像的宽高比为百分比宽度＆amp;在保持宽高比的同时调整其他div的大小

2 个答案: