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

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

HTML:

当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%;
    }

 实际应用时，将父元素的width: 100px;改成width: 100%;

图片根据屏幕会缩放