div中图片等比例缩放，且水平垂直居中

最新推荐文章于 2025-07-20 10:07:34 发布

原创最新推荐文章于 2025-07-20 10:07:34 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

面试总结

88 篇文章

订阅专栏

本文介绍了两种方法使div中的图片等比例缩放并保持水平垂直居中：方法一是传统方式，而方法二利用CSS3的`object-fit: contain`属性，该属性能保持图片宽高比并填充内容框，当图片与内容框比例不匹配时，可能会出现黑边。

方法一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      .my {
        width: 375px;
        height: 375px;
        background: red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        width: auto;
        height: auto;
        max-width: 375px;
        max-height: 375px;
      }
    </style>
  </head>

  <body>
    <div class="my">
      <img src="./img/test1.jpeg" alt="" />
    </div>
  </body>
</html>

方法二（CSS3 object-fit: contain）

object-fit 属性由下列的值中的单独一个关键字来指定。

contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

cover

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

fill

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

none

被替换的内容将保持其原有的尺寸。

scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
  }

  .mDiv {
    width: 375px;
    height: 375px;
    background: red;

  }

  img {
    width: 375px;
    height: 375px;
    object-fit: contain;
  }
</style>

<body>
  <div class="mDiv">
    <img src="./img/img1.jpg" alt="">
  </div>
</body>

</html>