实现图片自适应居中的一些方法，以及完美解决方法———object-fit

godlike-icy

于 2022-09-26 17:44:38 发布

阅读量1.3k

点赞数 4

分类专栏： web前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_43682422/article/details/126539370

版权

web前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

Object-fit是一条css属性，直接上MDN链接：
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

使用场景：实现图片自适应居中且完全展示，且不需要考虑图片的宽高比。

这里展示一张原图：链接（https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg）
可以看到宽高为：466x640，宽度小于高度。
在这里插入图片描述

1.常规写法

 <style>
      .wrapper {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
      .wrapper img {
        /* 图片是内联元素，转换为块级元素之后才能使用 margin:0 auto  */
        display: block;
        /* 图片居中 */
        margin: 0 auto;
        /* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应
         *如果是宽度大于高度，则宽度100%，高度不设置用来自适应
         *千万不能都宽高都设置100%，否则图片会被拉伸变形！！
         */
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <img
        src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
        alt=""
      />
    </div>
  </body>

效果：
在这里插入图片描述

2.使用flex布局

<style>
      .wrapper {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        /*父元素使用flex布局*/
        display: flex; 
        /*居中*/
        justify-content: center;
      }
      .wrapper img {
       /* 高度100%，宽度自适应，原图是宽度小于高度，所以宽度不设置用来自适应
         *如果是宽度大于高度，则宽度100%，高度不设置用来自适应
         *千万不能都宽高都设置100%，否则图片会被拉伸变形！！
         */
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <img
        src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
        alt=""
      />
    </div>
  </body>

以上两种方法弊端

可以看到我们需要明确的知道图片的宽高才能应用不同的样式，除非图片是1:1的正方形，否则必然会出现是宽度自适应还是高度自适应的问题。

使用object-fit的好处就是我们不需要考虑图片宽高比的问题了

使用object-fit

 <style>
      .wrapper {
        width: 100px;
        height: 100px;
        border:1px solid red;
      }
      .wrapper img {
       /* 宽度和高度务必都要设置成100%*/
        width: 100%; 
        height: 100%;
       /* 为contain的时候，图片将按原图的宽高比展示完全，且不会变形
        * 完全不用考虑图片的宽高比来判断是设置width:100%还是height:100%了
        * 且会自动居中
        */
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <img
        src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
        alt=""
      />
    </div>
  </body>