Пропорционально масштабируйте div с CSS на основе max-width (аналогично масштабированию img)

Можно ли пропорционально масштабировать a div как img, используя только CSS? Вот моя первая попытка: http://dabblet.com/gist/1783363

Пример

div {
 max-width:100px;
 max-height:50px;
}
img {
 max-width:100px;
 max-height:50px;
}

Фактический результат

Container: 200 x 100
Div:       100 x 50
Image:     100 x 50

Container: 50  x 100
Div:       50  x 50  // I want this to be 50x25, like the image
Image:     50  x 25

Ответы

Ответ 1

Так как вертикальные прокладки, установленные в процентах, вычисляются по ширине элемента, мы можем сделать div всегда равным некоторому соотношению сторон.

Если мы установим padding-top:50%; height:0, высота div всегда будет равна половине его ширины. И чтобы текст появился внутри такого контейнера, вам нужно сделать его position:relative и поместить в него еще один div и поместить его абсолютно на расстоянии 10 пикселей от всех четырех сторон (сначала установите прокладку).

Смотрите мою вилку вашего кода.

Ответ 2

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

-webkit-transform:scale(2); (и другие префиксы) удваивают его по размеру, не изменяя макет страницы.

Ответ 3

Try:

.container img {
    height:50vw;
}

vw следует за окном просмотра Вам нужно указать в заголовке документа:

<head>
<meta name="viewport" content="width=device-width">
</head>