Масштабировать div, чтобы он поместился в окне, но сохранить пропорции

Question

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

Спасибо!

Answer 1

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

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

$(document).width(); 

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

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

Answer 2

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

Answer 3

Благодаря Джеффу за советы о том, как структурировать математику и логику. Вот моя реализация 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 4

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

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

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 избавится от него.

Благодаря this post для наконечника!

---

Другой подход основан на том, что браузеры учитывают соотношение сторон изображения при изменении только его ширины или высоты. (Я дам 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; 
}