veremey · October 3, 2015 14:22
diff --git a/style.css b/style.css
 .ratio {
    width: 50%; /* здесь можно установить любую нужную ширину */
 }

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

 .ratio-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #cce;
 }

 .ratio-4-3 {
    padding-top: 75%; /* 100% ширины делим на 4 и умножаем на 3 */
 }

 .ratio-5-1 {
    padding-top: 20%; /* 100% ширины делим на 5 и умножаем на 1 */
 }
diff --git a/высота пропорциональна ширине b/высота пропорциональна ширине
 <div class="ratio">
    <div class="ratio-inner ratio-4-3">
        <div class="ratio-content">
            Это содержимое блока 4/3
        </div>
    </div>
 </div>
 <br>
 <div class="ratio">
    <div class="ratio-inner ratio-5-1">
        <div class="ratio-content">
            Это содержимое блока 5/1
        </div>
    </div>
 </div>
diff --git a/высота пропорциональна ширине.markdown b/высота пропорциональна ширине.markdown
	.ratio {
	width: 50%; /* здесь можно установить любую нужную ширину */
	}

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

	.ratio-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #cce;
	}

	.ratio-4-3 {
	padding-top: 75%; /* 100% ширины делим на 4 и умножаем на 3 */
	}

	.ratio-5-1 {
	padding-top: 20%; /* 100% ширины делим на 5 и умножаем на 1 */
	}