CSS实现图片居中且缩放不影响图片纵横比

实现代码

我们在编写页面代码的时候往往会需要添加图片。在使用过程中，获取的图片尺寸经常可能和页面需要的尺寸不一致，这时候就需要对获取图片进行缩放。

对图片缩放有一定技巧，或者说是固定的编写代码套路。否则可能稍有不慎，就会导致图片被拉伸，失去原有纵横比。下面代码展示了一种保持图片纵横比缩放图片的套路。

建议首先看一下这篇文章，使得基线位置和中线位置保持一致：图片垂直居中

下面是代码：

<!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对齐，还留着一小块区域。这是为什么呢？原因是img默认的对齐方式是vertical-align: baseline也就是基线对齐。而基线是什么，基线就是字母X的下边缘。而字符zxx本身是有高度的，对吧，于是，图片下面就留空了。

zxx文字的高度是由行高决定的。于是，当我们设置父元素div的行高为font-size: 0时，就可以消除这一小块没有对齐的区域了。

另外vertical-align属性只在inline的情况下才生效，我们可以把img的display改完block，同样也可以消除最下面的一小块不对齐区域。

通过img标签的max-width设置，可以保证，即使父组件div缩放了，子组件img也可以在保持纵横比的情况下等比例自动缩放。此外，需要注意的是，如果不设置的话，img如果加载一个比较大的图像时，可能会超出父组件的div包裹范围。img内容并不会永远限制在div中。

参考资料

[1] css img 等比例自动缩放
[2] 图片垂直居中
[3] 图片溢出div，超出div解决办法
[4] CSS深入理解vertical-align和line-height的基友关系