直接上代码

复制直接运行即可

<!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

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

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

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

css 固定图片尺寸16:9相关推荐

css修改图片尺寸后图片变模糊的问题
在富文本编辑器编辑文章发布到网站上时,因图片尺寸过大或导致页面混乱,并且需要兼容移动端.所以需要给图片限制max-width: 100%, 但是设置改属性后,若图片超过100%会导致图片模糊.关于这个 ...
css固定图片大小 vue_css3 实现图片等比例放大与缩小
css3 实现图片等比例放大与缩小在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
[css] 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？
[css] 固定的外框尺寸,里面的图片尺寸不固定,如何让图像自适应外框呢? 使用 object-fit ,用法类似background-size,可选的值:cover.contain.fill等个人 ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法的相关资料,希望小伙伴们看 ...
CSS固定背景的图片
CSS固定背景的图片对于一些背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在某一位置. CSS通过background-attachment的值为fixed来实现. & ...
为什么有全连接层的卷积网络输入图片尺寸需要固定的
一句话: 全连接层的一个神经元对应一个输入. 换句话说, 全连接层要求固定的输入维度. 数学推导: 大家都知道, z=wx+b,全连接神经网络结构一旦固定,需要学习的参数w是固定的,例如输入图像是 ...
CSS实现图片居中且缩放不影响图片纵横比
实现代码我们在编写页面代码的时候往往会需要添加图片.在使用过程中,获取的图片尺寸经常可能和页面需要的尺寸不一致,这时候就需要对获取图片进行缩放. 对图片缩放有一定技巧,或者说是固定的编写代码套路.否 ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...

css 固定图片尺寸16:9

css 固定图片尺寸16:9

直接上代码

关键代码：

0x00 效果图

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

0x02 代码解读

css 固定图片尺寸16:9相关推荐

最新文章

热门文章