Question

在html中，当你有一个图像并且它被设置为100％宽度时，该元素的高度自动保持成比例。我正在寻找能够在没有图像的情况下模仿这种功能的元素。我在考虑使用透明图像，但这似乎是css应该可行的。

不寻找JavaScript解决方案

Answer 1

这是possible使用新引入的viewport percentage lengths（有一些限制）。

div {
    background-color: peru;
    height: 20vw;
    width: 20vw;
}

有四种可能的单位：

1vh - 相对于视口高度的百分之一。
1vw - 与上述相同，但相对于视口的宽度。
1vmin - 这等于vh或vw，无论哪个更小。
1vmax - 与上述相同，但等于vh或vw

唯一需要注意的是browser support。 vmin＆amp; IE11不支持vmax个单位，IE9 +支持vh和vw长度，但最近才在移动浏览器中实施。 iOS7在渲染vh单元时也显然有问题。

Answer 2

答案：如果没有图片或javascript，这是不可能的

Answer 3

找到解决方案here。

我把它归结为这个http://jsfiddle.net/47amX/

<style>
.scaling-img {
    position: relative;
    visibility: hidden;
    width: 100%;
    min-width: 100%;
}

.outer {
    margin:10px;
    max-height:340px;
    max-width:340px;
    position: relative;
    outline: 1px solid grey;
}
</style>

<div class="outer">
    <img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>

保持比例宽度和高度的元素

3 个答案: