• css 固定图片尺寸16:9

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    关键代码：

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

    0x00 效果图

    在这里插入图片描述

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

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    0x02 代码解读

    

    
	
    
		
	
    

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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


    然后图片使用绝对定位在父元素上方就可以了
     
    这种方式适合不定宽且不定高的场景，比如 响应式网页

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

  • 相关阅读:
    Git 基础使用
    Kamiya丨Kamiya艾美捷人CP ELISA说明书
    BPA仿真软件需要购买吗,BPA电力仿真软件教程
    【oceanbase】安装ocp，ocp部署oceanbase
    算法通关村第16关【黄金】| 滑动窗口与堆结合
    flink测试redis sink报错
    JAVA反编译工具：JADX-GUI、
    在一个方法里 有另一个方法 这第二个方法想要被全局都能调用怎么办
    epoll实现异步请求数据---以UDP为例
    Ubuntu LTS 坚持 10 年更新不动摇
  • 原文地址：https://blog.csdn.net/huang_cheng_zhi/article/details/127688450