padding-top
属性接受百分比值时,其百分比是基于父元素的宽度来计算的,而不是自身元素的宽度
aspect-ratio
更方便,但存在兼容性问题
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {outline: 1px solid #000;}.wrap {display: flex;}.box {flex: 1;}.container {position: relative;width: 100%;padding-top: 56.25%;/* aspect-ratio: 16 / 9; */ 存在兼容性问题}.content {position: absolute;top: 0;left: 0;bottom: 0;right: 0;text-align: center;color: black;}img {width: 100%;height: 100%;object-fit: cover;}</style></head><body><div class="wrap"><div class="box"><div class="container"><div class="content"><img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" /></div></div></div><div class="box"><div class="container"><div class="content"><img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" /></div></div></div><div class="box"><div class="container"><div class="content"><img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" /></div></div></div></div></body>
</html>