使用 CSS 保持 div 的纵横比

在网页设计中，我们可能会遇到需要设置 div 的纵横比的情况，比如需要将一张图片放在一个 div 中，并让这个 div 保持原图片的纵横比。本文将介绍如何使用 CSS 实现这个目标。

设置 div 的宽高比

要保持 div 的纵横比，首先需要将 div 的宽高比设置为固定的值。我们可以使用 padding 或者 box-sizing 属性来实现这一目标。

使用 padding 属性

我们可以使用 padding 属性来设置 div 的宽高比。具体做法是，给 div 设置一个固定的 padding 值，然后将 div 中的内容放在一个子元素中，并将子元素的宽度和高度都设置为 100%。这样一来，子元素的实际宽度和高度就会受到 div 的 padding 影响，从而实现了保持纵横比的效果。

代码示例：

<style>
    .wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 根据视频的纵横比计算实际值 */
    }
    .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="wrapper">
    <iframe class="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

使用 box-sizing 属性

另一种设置 div 宽高比的方法是使用 box-sizing 属性。具体做法是，将 div 的 box-sizing 属性设置为 border-box，然后设置 div 的宽度为固定值，高度为 auto。这样一来，div 的实际高度就会根据宽度和 padding 来计算，从而实现了保持纵横比的效果。

代码示例：

<style>
    .wrapper {
        position: relative;
        width: 500px; /* 固定宽度 */
        height: auto;
        box-sizing: border-box; /* 这里设置 box-sizing 属性 */
        padding-top: 56.25%; /* 根据视频的纵横比计算实际值 */
    }
    .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="wrapper">
    <iframe class="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

总结

本文介绍了如何使用 CSS 保持 div 的纵横比。具体来说，我们可以使用 padding 或者 box-sizing 属性来实现这个目标。这些技巧对于网页设计中需要保持纵横比的情况有很大的帮助，而且也非常容易实现。