基于最大宽度，按比例缩放div元素（类似于图片缩放）的CSS方法。

Question

基于最大宽度，按比例缩放div元素（类似于图片缩放）的CSS方法。

12

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

- Adam Youngers

你到底想要做什么？ - Martin

Dabblet服务器目前已经宕机，所以这可能并不是你想要的，但百分比难道不是为此而生的吗？ - joshnh

@bfrohs：请注意，反引号在标题中不起作用。 :) - sarnold

@sarnold - 感谢您的重写。清晰明了多了。 - Adam Youngers

@bfrohs 做了所有的工作：http://stackoverflow.com/posts/9219005/revisions 我只是从标题中删除了一些反引号。（我本应该也修正标题中的拼写错误，但直到现在我才看到它。） - sarnold

3个回答

5

“有点类似。您可以使用转换来放大它，但我不确定这是否符合您的意愿。”

“-webkit-transform:scale(2);（以及其他前缀）会将其大小加倍，而无需改变页面布局。”

- zim2411

0

尝试：

.container img {
    height:50vw;
}

vw（视窗宽度单位）遵循视口大小。您需要在文档头部设置：

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

- user3849374

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spadar Shut · Accepted Answer

由于以百分比设置的垂直填充是根据元素的宽度计算出来的，因此我们可以使一个div始终保持一定的宽高比。

如果我们设置 padding-top:50%; height:0，那么div的高度将始终是其宽度的一半。为了使文本出现在这样的容器内，您需要将其设为position:relative并在其中放置另一个div，并将其绝对定位在四个边距（先前设置的填充）之外10px处。

请参见我修改过的代码。