Рассчитать высоту блока от его ширины
Редактировать.
HTML:
<div class="laptop">
<div class="laptop-display">
<img class="laptop-t" src="/templates/sonkins/images/backgrounds/laptop-top.png" alt="">
<div class="laptop-inner laptop-4-3">
<div class="laptop-content">
<?php echo $this->renderPosition('image');?>
</div>
</div>
</div>
<img class="laptop-bottom" src="/templates/sonkins/images/backgrounds/laptop-bg.png" alt="">
</div>
CSS:
.laptop-display {
width: 75%;
background: #333;
margin: 0 auto;
padding: 3%;
border-radius: 25px 25px 0 0;
box-shadow: 0 0 2px 2px #eee, 0 0 8px 1px rgba(0, 0, 0, 0.6);
}
.laptop-inner {
position: relative;
height: 0;
border: none;
overflow: auto;
}
.laptop-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
}
.laptop-4-3 {
padding-top: 55%; /* 100% ширины делим на 4 и умножаем на 3 */
}
.laptop-bottom {
margin-top: -5px;
}Ссылки и благодарности
Источник: http://jsfiddle.net/qso14y3k/