javascript - 使用 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，所以我们将图像显示为 block ，将其包裹在一个 div 中，并在其中放置一个绝对定位的 div。我从我实际测试过的更复杂的东西中提炼出这段代码。奇迹般有效。