Automatic width relative to height + resizing the window - css

Question

I'm building a web application in which I want a specific element to scale relative to it's parent. As far as I know, the only way to achieve this without using javascript is to use an image with the desired aspect ratio (there have been several other Stackoverflow posts about this issue), which is what I have done, so basically this:
div { height:20%; display:inline-block; }
div img { height:100%; }
This causes the div to scale the way I want, but the problem is that when the browser is resized, the width of the image changes, but the width of the div doesn't.. After refreshing the page, the element will be scaled properly again.
I've made a working example here: https://jsfiddle.net/r1efuzmb/ You can see the issue when you resize your browser or the "output" column on the Jsfiddle website.
Some notes:
The issue only occurs in Chrome and IE. In Firefox and Safari the div is scaling correctly.
I could use vh-units to set the width, but since I'm trying to scale this element relative to it's parent and not the viewport, it's not really ideal.
Does anyone know if this is a browser issue and/or if there's a way to work around this?
Thanks!

Answer 1

You can use padding-top on the before pseudo element to get the same effect as if you would have used an image.

Answer 2

div img {
height: auto;
width: 100%;
}
The image will fill the container with its proper aspect ratio.

Answer 3

I think that by using float and let the image-container always be 20vh could be a possible solution in your case.
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>