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

Question

我正在构建一个Web应用程序，我想要一个特定元素相对于它的父级进行缩放。据我所知，唯一不使用javascript的方法是使用具有所需长宽比的图像（有关于此问题的其他几篇Stackoverflow文章），这就是我所做的，所以基本如此：

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

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

我在此做了一个工作示例：https://jsfiddle.net/r1efuzmb/当您调整浏览器或Jsfiddle网站上的“输出”列时，可以看到问题。

一些注意事项：

• 问题只发生在Chrome和IE。在Firefox和Safari中，div正确缩放。
• 我可以使用vh单位设置宽度，但由于我试图缩放这个元素相对于它的父母而不是视口，它并不是真正理想的。

有谁知道这是浏览器问题还是有办法解决这个问题？

谢谢！

Answer 1

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

Answer 2

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

图像将填充其合适的宽高比的容器。

Answer 3

我认为，通过使用浮动并让图像容器总是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>