Question

例如，当我有一个图像：

<img src="10px_image.png" alt="Some image" style="width: 100%" />

它的高度会根据图像的宽度自动缩放（例如，当您调整浏览器窗口大小时，可以看到）。有没有办法对html中的其他元素做同样的事情？

Answer 1

解决方案＃1

您可以使用新的css视口单元vw，vh等将其关闭。

<强> FIDDLE

div
{
    width: 40vw;
    height: 20vw;
    background: pink;
}

CSS3有一些新值可用于调整与当前相关的内容   视口大小：vw，vh和vmin。   三个值中的任何一个上的一个单位是视口轴的1％。   “视口”==浏览器窗口大小==窗口对象。如果视口是   40厘米宽，1伏= = 0.4厘米。

1vw =视口宽度的1％1vh =视口高度的1％1vmin = 1vw或   1vh，取较小的1vmax = 1vw或1vh，以较大者为准（css-tricks post）

Support：IE 9 +，Firefox 19 +，Chrome 20 +，Safari 6+

参考： w3c ， mozilla

解决方案＃2

<强> FIDDLE

标记

<div class="container">
    <div class="outer r4x3">
        <div class="inner">
        </div>
    </div>
</div>

CSS

/* container defines margins and width */
.container {
    margin: 60px 120px 0;
}

/* outer container will define aspect ratio */
.outer {
    position: relative;
    width: 100%;
}

.outer.r4x3 {
    padding-top: 75%; /* "height" will be 3/4 of width */
}
/* inner container positioned absolutely and holds content */
.outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    outline: 1px solid grey;
    background: pink;
}

Answer 2

这是一个技巧，实际上是响应式视频和iframe保持宽高比，但它也适用于其他事情...... http://webdesignerwall.com/tutorials/css-elastic-videos

缩放元素，如图像

2 个答案:

解决方案＃1

解决方案＃2

标记

CSS