最簡(jiǎn)單的等比例：div?img?{?max-width:100%;?max-height:100%;?}

如上顯示效果是：圖片等比例縮放，不變形；圖片所有區(qū)域都會(huì)顯示。

但是，如上代碼有可能會(huì)造成橫向、縱向白邊，當(dāng)我們?cè)谧鰣D片列表時(shí)，這會(huì)看起來(lái)有點(diǎn)亂，于是我們改進(jìn)了下，保證橫向沒(méi)有白邊，高度不足時(shí)上下留白，高度超出時(shí)隱藏圖的上下：div?{?display:flex;?align-items:center;?justify-content:center;?width:160px;?height:90px;?border:1px?solid?#eee;?overflow:hidden;?}

div?img?{?width:160px;?}

首先：display:flex; align-items:center; justify-content:center; 保證水平、垂直居中顯示。

其次：width:160px; height:90px; border:1px solid #eee; 限定顯示框的大小。

然后：overflow:hidden; 實(shí)現(xiàn)圖片高度超出的話，隱藏之。

最后：width:160px; 保障圖片寬度一致。

這樣：當(dāng)高度不夠時(shí)，圖片垂直居中，上下留白；當(dāng)高度超出時(shí)，圖片上下被隱藏。

總結(jié)

以上是生活随笔為你收集整理的css3 背景等比例,纯 CSS，不用背景，实现图片等比例展示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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