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

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

11 голосов
/ 10 февраля 2012

Можно ли пропорционально масштабировать 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

Ответы [ 3 ]

36 голосов
/ 11 февраля 2012

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

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

См. мой форк вашего кода .

5 голосов
/ 10 февраля 2012

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

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

0 голосов
/ 02 июня 2017

Попробуйте: 

.container img {
    height:50vw;
}

VW следует за областью просмотра, которую необходимо установить в заголовке документа: 

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