Масштабировать div для установки в окно, но сохранить соотношение сторон

Ответ 1

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

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

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 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 bottom edge */
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  outline: thin dashed green;
}

Ответ 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;      
}

Это хорошо работает для меня прямо сейчас по размеру ноутбука и мобильного телефона.

Ответ 3

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

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

$(document).width();

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

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

Ответ 4

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