实施例

Question

是否可以仅使用CSS按比例缩放div img？这是我的第一次尝试：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

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

如果我们设置padding-top:50%; height:0，div的高度将始终是其宽度的一半。要使文本显示在这样的容器中，您需要将其设置为position:relative并在其中放置另一个div，并将其与所有四个边（您首先设置的填充）绝对放置10px。

请参阅my fork of your code。

Answer 2

排序。你可以使用转换来扩展它，但我不确定你的想法是什么。

-webkit-transform:scale(2);（以及其他前缀）会使其大小翻倍，而不会改变页面布局。

Answer 3

尝试：

.container img {
    height:50vw;
}

vw跟随视口您需要在文档的头部设置：

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

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

实施例

实际结果

3 个答案: