让图片(img)的最长边撑满父元素同时让图片居中、不变形

最新推荐文章于 2023-11-23 10:01:20 发布

苏沐离

最新推荐文章于 2023-11-23 10:01:20 发布

阅读量5k

点赞数

分类专栏： html、css进阶之旅文章标签： html css

本文链接：https://blog.csdn.net/I_2436/article/details/105995805

版权

html、css进阶之旅专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里先说一个名词：元素的宽高比例，即用元素的宽除以元素的高（width / height）得到的数值就是元素的宽高比例。

要让图片的最长边撑满父元素，同时让图片不变形并且居中显示出来是分三种情况的。

第一种情况：图片的宽高比例和父元素的宽高比例相等，图片尺寸就是父元素的尺寸，这一种情况可能不常见。

第二种情况：图片的宽高比例小于父元素的宽高比例时，这个时候图片的高能完全展示出来，图片的宽则会等比例缩放。

第三种情况：图片的宽高比例大于父元素的宽高比例时，这个时候图片的宽能完全展示出来，图片的高则会等比例缩放。

当我们在开发某些需求的时候，图片的尺寸是一个很大的变量，是不可控的，我们还要想让图片的最长边撑满父元素，并且不让图片变形、居中显示出来。这个时候就需要下面的代码了。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片自适应</title>
  <style>
    .box {
      margin: 30px auto 0;
      width: 600px;
      height: 300px;
      background-color: #191919;
      border-radius: 4px;
    }

    .box .auto-img{
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    <img class="auto-img" src="https://placem.at/places?w=600&h=400" alt="">
  </div>
</body>

</html>