當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

css 固定图片尺寸16:9

發(fā)布時(shí)間：2024/1/18 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 css 固定图片尺寸16:9 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

css 固定圖片尺寸16:9

直接上代碼
- 關(guān)鍵代碼：
- 0x00 效果圖
- 0x01 各個(gè)圖片原始尺寸與現(xiàn)尺寸對(duì)比
- 0x02 代碼解讀

直接上代碼

復(fù)制直接運(yùn)行即可

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

關(guān)鍵代碼：

父元素： position:relative;width:100%;padding-bottom:56.25%;
子元素(img標(biāo)簽)： position:absolute;width:100%;height:100%;

0x00 效果圖

0x01 各個(gè)圖片原始尺寸與現(xiàn)尺寸對(duì)比

0x02 代碼解讀

padding margin 如果為百分比那么這個(gè)值便是父元素（最近的一個(gè)[內(nèi)聯(lián)]塊級(jí)元素）的寬度值乘這個(gè)百分比
這個(gè)時(shí)候，img 父元素的高度就有了也就是我們需要的16:9 ??
如果需要其他比例，則用高除以寬度就ok

然后圖片使用絕對(duì)定位在父元素上方就可以了
?
這種方式適合不定寬且不定高的場(chǎng)景，比如響應(yīng)式網(wǎng)頁(yè)

百分比這塊以后再詳細(xì)講一講

總結(jié)

以上是生活随笔為你收集整理的css 固定图片尺寸16:9的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。