CSS-实现不同尺寸大小图片自适应父级DIV

最新推荐文章于 2025-05-27 13:48:54 发布

antipro7

最新推荐文章于 2025-05-27 13:48:54 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41976150/article/details/87891281

本文介绍了一种使图片在不同大小的容器内自适应显示且保持比例不失真的方法，利用CSS的max-width和max-height属性配合flex布局实现图片的垂直水平居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍：有时我们放置图片时，因为父级元素固定了大小导致图片比例失调或者是图片被裁剪，体验非常不好。下面介绍一个简单的方法（初学者，欢迎大家提出建议）

HTML:

<div class="outer">
    <img src="img/0117985b836f01a8012190f234ee4c.jpg@2o.jpg">
  </div>
  <div class="outer">
    <img src="img/art-blue-sky-daylight-1251720.jpg">
  </div>
  <div class="outer">
    <img src="img/v2-5935f8e9440aa3ada16fd70381c1cb41_r.jpg">
  </div>

当CSS只这样写时:

.outer {
      width: 100px;
      height: 500px;
      background-color: aquamarine;
      margin: 20px;
    }

图片随意摆放，有的被裁减，有的溢出父元素

实现自适应，我们给图片这样设置：

img {
      max-width: 100%;
      max-height: 100%;
    }

为了方便观察，我给父元素加了float

再用flex布局实现垂直水平居中

.outer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 500px;
      background-color: aquamarine;
      margin: 20px;
    }

    img {
      max-width: 100%;
      max-height: 100%;
    }