Масштабировать div, чтобы уместить его в окне, но сохранить соотношение сторон

Question

Как я могу масштабировать div, чтобы поместиться в порт просмотра браузера, но сохранить соотношение сторон div. Как я могу сделать это с помощью CSS и / или JQuery?

Спасибо!

Answer 1

Вам не нужен JavaScript для этого. Вы можете использовать чистый CSS.

Процент верхнего отступа интерпретируется относительно содержащего блока ширина . Объедините его с position: absolute в дочернем элементе, и вы можете поместить практически все в поле, сохраняющее его соотношение сторон.

HTML:

<div class="aspectwrapper">
  <div class="content">
  </div>
</div>

CSS:

.aspectwrapper {
  display: inline-block; /* shrink to fit */
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
  outline: thin dashed green;            /* just so you can see the box */
}

display: inline-block оставляет немного дополнительного пространства под нижним краем поля .aspectwrapper, поэтому другой элемент под ним не будет работать вплотную к нему. Использование display: block избавит от него.

Спасибо за этот пост за подсказку!

---

Другой подход основан на том факте, что браузеры учитывают соотношение сторон изображения, когда вы изменяете размер только его ширины или высоты. (Я позволю Google генерировать прозрачное изображение 16x9 для демонстрационных целей, но на практике вы будете использовать свое собственное статическое изображение.)

HTML:

<div class="aspectwrapper">
  <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" />
  <div class="content">
  </div>
</div>

CSS:

.aspectwrapper {
  width: 100%;
  position: relative;
}
.aspectspacer {
  width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  outline: thin dashed green;
}

Answer 2

Спасибо Джеффу за совет о том, как структурировать математику и логику. Вот моя реализация jQuery, которую я использую для определения размера лайтбокса, чтобы он заполнял окно:

var height = originalHeight;
var width = originalWidth;
aspect = width / height;

if($(window).height() < $(window).width()) {
    var resizedHeight = $(window).height();
    var resizedWidth = resizedHeight * aspect;
}

else { // screen width is smaller than height (mobile, etc)
    var resizedWidth = $(window).width();
    var resizedHeight = resizedWidth / aspect;      
}

Для меня сейчас это хорошо работает на экранах ноутбуков и мобильных устройств.

Answer 3

jQuery имеет плагин, который увеличивает объект, пока одна из его сторон не достигнет определенного значения px. Связав это с высотой окна просмотра, вы можете расширить любой элемент до этого размера: jQuery MaxSide .

Answer 4

Это возможно с JQuery и немного математики.

Используйте JQuery для получения ширины и высоты портов просмотра, а также текущих размеров divs.

$(document).width();

Рассчитать текущее соотношение сторон divs. например, ширина / высота

Вам нужно немного логики, чтобы определить, устанавливать ли сначала ширину или высоту, а затем использовать начальное соотношение для расчета другой стороны.