<div class="wrapper">
<img class="image" src="" alt="">
</div>
.wrapper {
position: relative;
display: block;
}
.wrapper::before {
content: '';
display: block;
padding-top: 50%; // вычисляется относительно ширины родителя
}
.image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
$(document).ready