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

最新推荐文章于 2025-09-08 09:40:25 发布

原创最新推荐文章于 2025-09-08 09:40:25 发布 · 4.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #图片垂直居中

前端专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何使用CSS使图片在缩放时保持纵横比，并实现居中对齐。关键在于设置`font-size: 0`来消除基线对齐的问题，通过`max-width`确保图片按比例缩放，同时利用`vertical-align`和`line-height`实现垂直居中。文章引用了相关参考资料，提供更深入的理解。

实现代码

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

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

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

下面是代码：

<!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，同样也可以消除最下面的一小块不对齐区域。