當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css 固定图片尺寸16:9

發布時間：2024/1/18 编程问答 33 豆豆

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

css 固定圖片尺寸16:9

直接上代碼
- 關鍵代碼：
- 0x00 效果圖
- 0x01 各個圖片原始尺寸與現尺寸對比
- 0x02 代碼解讀

直接上代碼

復制直接運行即可

<!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 代碼解讀

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

然后圖片使用絕對定位在父元素上方就可以了
?
這種方式適合不定寬且不定高的場景，比如響應式網頁

百分比這塊以后再詳細講一講

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。