Proportionally scale a div with CSS based on max-w

2019-01-22 04:17发布

Is it possible to proportionally scale a div like an img using only CSS? Here is my first attempt: http://dabblet.com/gist/1783363

Example

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

Actual Result

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

标签： css image html css3 scale

3条回答

Luminary・发光体

2楼-- · 2019-01-22 05:02

Sort of. You could use transformations to scale it up, but I'm not sure that's what you have in mind.

-webkit-transform:scale(2); (and other prefixes) would double it in size, without altering page layout.

0人赞添加讨论(0) 举报

家丑人穷心不美

3楼-- · 2019-01-22 05:03

Since vertical paddings set in percent are calculated out of width of an element we can make a div always be of a certain aspect ratio.

If we set padding-top:50%; height:0, the height of the div will always be half of its width. And to make text appear inside such a container you need to make it position:relative and put another div inside it and position it absolutely 10px away from all four sides (the padding you set first).

See my fork of your code.

0人赞添加讨论(0) 举报

我想做一个坏孩纸

4楼-- · 2019-01-22 05:09

Try:

.container img {
    height:50vw;
}

The vw follows the viewport You need to set in the head of your document:

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

0人赞添加讨论(0) 举报

Proportionally scale a div with CSS based on max-w

Example

Actual Result

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间