CSS实现图片居中且缩放不影响图片纵横比
實現(xiàn)代碼
我們在編寫頁面代碼的時候往往會需要添加圖片。在使用過程中，獲取的圖片尺寸經(jīng)?？赡芎晚撁嫘枰某叽绮灰恢?#xff0c;這時候就需要對獲取圖片進行縮放。
對圖片縮放有一定技巧，或者說是固定的編寫代碼套路。否則可能稍有不慎，就會導致圖片被拉伸，失去原有縱橫比。下面代碼展示了一種保持圖片縱橫比縮放圖片的套路。
建議首先看一下這篇文章，使得基線位置和中線位置保持一致：圖片垂直居中
下面是代碼：
<!DOCTYPE html> <html><head><title>這是個標題</title><style type="text/css">div {width: 700px;height: 500px;line-height: 500px;text-align: center;font-size: 0;background-color: gray;}img {width: auto;max-width: 100%;height: auto;max-height: 100%;vertical-align: middle;}</style></head><body><h1>這是一個一個簡單的HTML</h1><div><!-- 這是一個比較大的圖片url --><img src="https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/00e93901213fb80ea80ffd7534d12f2eb83894b2.jpg" alt=""><!-- 這是一個比較小的圖片url --><!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F51modo.cc%2Fupload%2Fkindeditor%2Fimage%2F20150211%2F20150211174716_65906.jpg&refer=http%3A%2F%2F51modo.cc&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617864784&t=b39d0cad6c14f8f970a9c29775152024" alt=""> --></div><p>Hello World！</p></body> </html>font-size: 0
圖片垂直居中這篇文章可能關于font-size: 0這一點解釋的不夠詳細，關于這一點，我再多啰嗦幾句，來個直觀感受。比如我有這么一段內容：
<div class="test1" style="background-color:gray;"><img class="test2" src="https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> </div>不添加任何CSS樣式的情況下，渲染之后大致是這樣的：
從圖中可以看到，圖片并沒有和div對齊，還留著一小塊區(qū)域。這是為什么呢？原因是img默認的對齊方式是vertical-align: baseline也就是基線對齊。而基線是什么，基線就是字母X的下邊緣。而字符zxx本身是有高度的，對吧，于是，圖片下面就留空了。
zxx文字的高度是由行高決定的。于是，當我們設置父元素div的行高為font-size: 0時，就可以消除這一小塊沒有對齊的區(qū)域了。
另外vertical-align屬性只在inline的情況下才生效，我們可以把img的display改完block，同樣也可以消除最下面的一小塊不對齊區(qū)域。
通過img標簽的max-width設置，可以保證，即使父組件div縮放了，子組件img也可以在保持縱橫比的情況下等比例自動縮放。此外，需要注意的是，如果不設置的話，img如果加載一個比較大的圖像時，可能會超出父組件的div包裹范圍。img內容并不會永遠限制在div中。
參考資料
[1] css img 等比例自動縮放
[2] 圖片垂直居中
[3] 圖片溢出div，超出div解決辦法
[4] CSS深入理解vertical-align和line-height的基友關系
總結
以上是生活随笔為你收集整理的CSS实现图片居中且缩放不影响图片纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用CSS写出一个下拉菜单小箭头
- 下一篇： CSS设置样式时，鼠标移动到div上，发