Рассчитать высоту блока от его ширины
Редактировать.
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/