How to make rubber blocks in height?

Good afternoon, it is necessary to create such a structure
The left image is 960x960 and takes 50% of the screen, ie the screen is 1920 ( 960* 2) . But what if the screen is 1600, then the image will occupy 50% and will have a height of 800px, however I can't adjust the width. Is it possible to make that the height was equal to the width( without js)?
April 4th 20 at 13:30
1 answer
April 4th 20 at 13:32
<div class="ratio">
 <div class="ratio-ratio inner-1-1">
 <div class="ratio-content">
 This content block 1/1

.ratio {
 width: 150px; /* here you can set any desired width */

.ratio-inner {
 position: relative;
 height: 0;
 border: none;

.ratio-content {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: #eee;
.ratio-1-1 {
 padding-top: 100%; /* here you can set the proportion of the height in % of width */

Find more questions by tags CSSHTMLLayout