使用CSS(也许是JavaScript)使元素成为正方形(或保持特定的宽高比)

Question

我有一个div,我希望有以下特点:

• 宽度=其父元素的50%
• 高度等于它需要的任何高度,以保持一定的宽高比.

我需要使用百分比,因为在调整浏览器大小时,对象将在左右调整大小.我希望对象在上下调整大小以确保对象保持相同的宽高比.

我不认为有任何方法可以使用纯CSS来做到这一点,但有没有人知道一种方法？或者,有一种简单的JavaScript方法可以做到这一点吗？(JQuery很好.)

Answer 1

我想出了如何在没有js的情况下做到这一点,尽管你需要使用透明图像.

设置一个html结构,如:

<div class="rect_container"><img class="rect_image" src="rect_image.png"/>
 <div class="rect">Your favorite content here</div>
</div>

对rect_image使用AxB透明png,其中AxB是宽高比.

同时设置样式表如:

.rect_container {width: 50%; position: relative;}
.rect_image {width: 100%; display: block;}
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

这里重要的是利用图像在一个方向上调整大小时保持其纵横比的事实.同时,我们需要一个可用的div,所以我们将图像显示为块,将其包装在div中,并在其中放置一个绝对定位的div.我从实际测试的更复杂的东西中提取了这段代码.奇迹般有效.