[分享]css3固定宽高比例

 CSS3固定宽高比例是指在设置元素的宽度时，同时保持元素的高度与宽度的比例不变。这种技巧在设计响应式网站时非常有用，可以让网站在不同屏幕尺寸下防止元素失真或变形。 实现固定宽高比例的方法是使用“pa...

 CSS3固定宽高比例是指在设置元素的宽度时，同时保持元素的高度与宽度的比例不变。这种技巧在设计响应式网站时非常有用，可以让网站在不同屏幕尺寸下防止元素失真或变形。
实现固定宽高比例的方法是使用“padding-top百分比”技巧。具体来说，我们可以为元素设置一个伪元素（`:before`），然后为父元素设置 `position: relative` 和 `overflow: hidden` 属性。接着，在伪元素中设置一个百分比的 `padding-top`，用来控制高度。最后，在子元素中设置绝对定位和 `top: 0; left: 0; right: 0; bottom: 0;` 属性，使其填满整个父元素，并保持宽高比例。
下面的示例展示了如何以16:9的宽高比例显示视频：

<div class="video-container">
    <div class="video">
        <video src="video.mp4" controls></video>
    </div>
</div>
<br>
<style>
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.video video {
    width: 100%;
    height: 100%;
}
</style> 

以上代码中，视频容器（.video-container）的“padding-top: 56.25%”是指设置视频高度为宽度的56.25%（即16:9的比例），而视频元素（.video video）被设置为宽度和高度都为100%。
总结来说，CSS3固定宽高比例是一种非常实用的技巧，可以使网站在不同的屏幕尺寸下保持元素比例一致，避免元素失真或变形。使用“padding-top百分比”技巧可以轻松实现固定宽高比例的效果。