css 固定图片尺寸16:9
生活随笔
收集整理的這篇文章主要介紹了
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 代碼解讀
<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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 说两个我深藏多年的秘密！
- 下一篇： 将 CARLA egg 文件安装到 Py