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

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

但是，如上代碼有可能會造成橫向、縱向白邊，當(dāng)我們在做圖片列表時，這會看起來有點(diǎn)亂，于是我們改進(jìn)了下，保證橫向沒有白邊，高度不足時上下留白，高度超出時隱藏圖的上下：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; 實現(xiàn)圖片高度超出的話，隱藏之。

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

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

總結(jié)

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

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