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

问题描述

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

I would like to do the next trick in my css file so that (height = width) 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{
    height: 100%;
    width: (same as height);
}

我更喜欢用css而不是javascript。

I prefer to do it with css and not javascript.

提前谢谢。

推荐答案

（AFAIK）正在使用视口相关值（vh / vw）

The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw )

目前支持不大： http://caniuse.com/viewport-units ，但这里是一个快速演示

Support is not great at the moment: http://caniuse.com/viewport-units but here is a quick demo

JSFiddle

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

箱子是响应式的，但总是保持正方形。

The box is responsive but will always remain square.

纯％值不能用作 height：100％不等于 width ：100％，因为它们指的是不同的东西，是父母的相关维度。

Pure % values will not work as height:100% does not equal width:100% as they refer to different things being the relevant dimensions of the parent.

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