css高度与width相同 [英] css height same as width

问题描述

我想在我的css文件中做下一个技巧，因此width = height而不设置像素。我想这样做，无论浏览器的分辨率，在这两个维度上有相同的值。

I would like to do the next trick in my css file so that width=height without setting pixels. I want to do this so whatever the resolution of the browser is, to have same values on these two dimensions.

#test{
width: 20%;
height: (same as width);
}

可能吗？

推荐答案

这种效果可以用 padding 或 margin 该值相对于元素的容器的 width 。

That effect can be just faked with padding or margin since that values are relative to the width of the container for the element.

div {
  background:orange;
  width:20%;
  padding-top:20%;
}

检查此http://jsfiddle.net/4z8PT/

这篇关于css高度与width相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！