You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the parent element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
This is based on this article:
Proportional scaling of responsive boxes using just CSS