根据最大宽度按比例缩放带有CSS的div(类似于img缩放)

Question

是否可以按比例缩放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

Answer 1

由于以百分比设置的垂直填充是从元素的宽度计算出来的,因此我们可以使div总是具有一定的宽高比.

如果我们设置padding-top:50%; height:0,div的高度将始终是其宽度的一半.要使文本显示在这样的容器中,您需要制作它position:relative并在其中放入另一个div 并将其放置在距离所有四个边(您首先设置的填充)绝对10px的位置.

查看我的代码分支.

Answer 2

有点.你可以使用转换来扩展它,但我不确定你的想法是什么.

-webkit-transform:scale(2); (和其他前缀)会使其大小加倍,而不会改变页面布局.