css 固定图片尺寸16:9

huang_cheng_zhi

已于 2022-11-04 16:31:04 修改

阅读量2.3k

点赞数 2

分类专栏： css 文章标签： css 前端 html

于 2022-11-04 16:01:31 首次发布

本文链接：https://blog.csdn.net/huang_cheng_zhi/article/details/127688450

版权

css 专栏收录该内容

2 篇文章

订阅专栏

css 固定图片尺寸16:9

直接上代码

直接上代码

复制直接运行即可

<!DOCTYPE HTML>
<html>
	<head>
		<title>图片固定16:9尺寸</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.2.2/css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="row" style="width: 95%;margin: 50px auto 0 auto ;">
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://static.veer.com/veer-v2/cms/20221019/dc890e0c23364913a5e222362d3b29d2.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片1
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://tenfei01.cfp.cn/creative/vcg/veer/612/veer-129645925.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片2
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://static.veer.com/veer-v2/cms/20221024/7d5f20e425c84c7b9dfedcf8c5845a28.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片3
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://static.veer.com/veer-v2/cms/20221017/3e96d75130ab4f048b06a07101d30c99.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片4
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://tenfei01.cfp.cn/creative/vcg/veer/612/veer-344356155.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片5
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<div class="box">
					<a href="javascript:void(0)">
						<div style="position: relative;width: 100%;padding-bottom: 56.25%;">
							<img style="position: absolute;width: 100%;height: 100%;" src="https://tenfei01.cfp.cn/creative/vcg/veer/612/veer-410640525.jpg?x-oss-process=image/format,webp" alt="">
						</div>
					</a>
					<div style="text-align: center;padding-top: 10px;color: #000;">
						图片6
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

关键代码：

父元素： position:relative;width:100%;padding-bottom:56.25%;
子元素(img标签)： position:absolute;width:100%;height:100%;

0x00 效果图

在这里插入图片描述

0x01 各个图片原始尺寸与现尺寸对比

在这里插入图片描述

0x02 代码解读


<div style="width:100px">
	<div style="position:relative;width:100%;padding-bottom:56.25%">
		<img  src="..." />
	</div>
</div>

padding margin 如果为百分比那么这个值便是父元素（最近的一个[内联]块级元素）的宽度值乘这个百分比
这个时候，img 父元素的高度就有了也就是我们需要的16:9
如果需要其他比例，则用高除以宽度就ok

然后图片使用绝对定位在父元素上方就可以了

这种方式适合不定宽且不定高的场景，比如响应式网页

百分比这块以后再详细讲一讲