Question

我正在构建一个Web应用程序，我想要一个特定元素相对于它的父级进行扩展。据我所知，在不使用javascript的情况下实现此目的的唯一方法是使用具有所需宽高比的图像（关于此问题还有其他几个Stackoverflow帖子），这就是我所做的，所以基本上这样：< / p>

div { height:20%; display:inline-block; }
div img { height:100%; }

这会导致div按照我想要的方式缩放，但问题是当浏览器调整大小时，图像的宽度会改变，但div的宽度不会...刷新页面后，该元素将再次正确缩放。

我在这里做了一个有效的例子：https://jsfiddle.net/r1efuzmb/当你调整浏览器大小或者输出＆＃34;时，你可以看到问题。 Jsfiddle网站上的专栏。

一些注意事项：

此问题仅发生在Chrome和IE中。在Firefox和Safari中，div正在正确缩放。
我可以使用vh-units来设置宽度，但是因为我试图相对于它的父级而不是视口来扩展这个元素，所以它并不是很理想。

是否有人知道这是否是浏览器问题和/或是否有办法解决此问题？

谢谢！

Answer 1

您可以在before伪元素上使用padding-top来获得与使用图像时相同的效果。

Answer 2

div img { height: auto; width: 100%; }

图像将以适当的宽高比填充容器。

Answer 3

我认为通过使用float并让图像容器始终为20vh可能是您可能的解决方案。

html, body { 
  height:100%;
  margin: 0;
}
.card-container { 
  height:20vh; 
  display:inline-block; 
  background-color:red;
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color:lightgray;
}
.cards{ 
  height: 20vh;
  display: inline-block;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.cards:after{ 
  content:"";
  display:block;
  clear:both;}

.cards img { 
  display: block; 
  float: left; 
  height:100%; 
  width:auto; 
  padding:0 2px; 
}

<div class="card-container">
  <div class="cards">
    <img src="http://lorempixel.com/100/150/">
    <img src="http://lorempixel.com/100/150/">
    <img src="http://lorempixel.com/100/150/">
    <img src="http://lorempixel.com/100/150/">
    </div>
</div>

相对于高度的自动宽度+调整窗口大小

3 个答案: