css实现图片按照16：9的比例展示图片的父父容器宽度无论设置多少，最后图片的大小比例就是16：9；这种方法实现简单方便

实现效果：

代码展示：

<!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>
		.box {
			width: 600px;
			/* 这里的宽度无论设置多少，最后图片的大小比例就是16：9 */
		}

		.img_wap {
			padding-top: 56.25%;
			width: 100%;
			position: relative;
		}

		.img_wap img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="img_wap">
			<img
				src="https://t7.baidu.com/it/u=1373841749,1945258235&fm=218&app=126&size=f242,150&n=0&f=PNG?s=AFE0F117CA2B71090EE944610300E032&sec=1703610000&t=666f0888df9fd2236d19dad5a6e52550" />
		</div>
	</div>
</body>

</html>

css实现图片按照16：9的比例展示

实现效果：

代码展示：

补充：css属性aspect-ratio: 16/9;(响应式网页设计中，保持一致的纵横比) 可以直接达到这种效果；不过兼容性不太好；如果项目没有兼容性要求；可以用