图片变形处理方法

css图片不变形处理：

当UI出好图时，图片的格式都是有一定比例。但是你不知道的是从后台拉取的图片到底是什么比例的。

如果给图片写死宽高的话，就会出现图片变形的问题。这个时候产品就会找你说话了。。。

目前的处理有两种方式

１，通过背景图的方式处理。通过background-size作用在容器上

<div class="img_background"></div>

.img_background{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      background-image: url('2.jpeg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
}

2，对图片使用使用object-fit:cover(推荐使用)

<div class="img_fit">
    <img src="2.jpeg"/>
</div>

.img_fit{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

object-fit,具体有5个值：

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

两种方式实现和效果和原理其实是一样的。都是通过缩放比例，覆盖整个尺寸之后。居中显示。

因为若想图片不变形的，肯定是需要缩放的。

利用flex制作图片列表小demo

第一种：在宽高未知的情况下，保持原图比例缩放大小，缺点是所显示的图片高度不一致

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 5px;
        }
        #main {
            /* width: 100%; */
            display: -webkit-flex;
            /* Safari */
            -webkit-flex-flow: row-reverse wrap;
            /* Safari 6.1+ */
            display: flex;
            flex-direction: row;
            align-content: flex-start;
        }
        #main .item {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .imgDiv {
            margin: 5px;
            -moz-box-shadow: 1px 3px 5px #888888;
            /* 老的 Firefox */
            box-shadow: 1px 3px 5px #888888;
        }
        .imgDiv img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="item">
            <div class="imgDiv">
                <img src="img/1.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
        <div class="item">
            <div class="imgDiv">
                <img src="img/2.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
        <div class="item">
            <div class="imgDiv">
                <img src="img/3.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
        <div class="item">
            <div class="imgDiv">
                <img src="img/1.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
        <div class="item">
            <div class="imgDiv">
                <img src="img/2.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
        <div class="item">
            <div class="imgDiv">
                <img src="img/3.jpg" alt="">
            </div>
            <div>hellow</div>
        </div>
    </div>
</body>
</html>

上图：

image

第二种：图片高度可以保持一致，缺点是为了图片不变形，部分图片会被截掉

<!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>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: flex;
            flex-wrap: wrap;
            padding: 0 5px;
        }
        .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 25%;
            box-sizing: border-box;
            padding: 5px;
        }
        .main {
            flex: 1;
            box-shadow: 2px 2px 5px #888;
        }
        .main-content {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
        }
        .main img {
            display: block;
            position: absolute;
            height: 100%;
            width: auto;
            max-width: 100%;
            object-fit: cover;
        }
    </style>
    <div class="box">
        <div class="item">
            <div class="main">
                <div class="main-content">
                    <img src="./img/1.jpg" />
                </div>
                <div class="text">1</div>
            </div>
        </div>
        <div class="item">
            <div class="main">
                <div class="main-content">
                    <img src="./img/2.jpg" /></div>
                <div class="text">2</div>
            </div>
        </div>
        <div class="item">
            <div class="main">
                <div class="main-content">
                    <img src="./img/3.jpg" /></div>
                <div class="text">3</div>
            </div>
        </div>
        <div class="item">
            <div class="main">
                <div class="main-content">
                    <img src="./img/4.png" /></div>
                <div class="text">4</div>
            </div>
        </div>
        <div class="item">
            <div class="main">
                <div class="main-content">
                    <img src="./img/1.jpg" /></div>
                <div class="text">5</div>
            </div>
        </div>
    </div>
</body>
</html>

上图：

image.png