background-size:cover使用transition不生效的完美替代方案background-size:c

被我骗进来了吧哈哈哈，最近在解决一个在自适应布局下，图片尺寸和盒子尺寸比较不符合的情况下，实现图片全覆盖且良好展示且添加过渡效果的问题，被我找到了比较合适的方案。

以数字马力招聘官网举例子，素材可以点击数字马力自取，这几张图片的尺寸和盒子尺寸都不太符合，特别是第一张，要想让图片不失真展示，好像只有这一种方法：将图片设置为盒子背景图片，并添加background-size:cover。因为background-size:cover不能和transition一起使用，所以就使用遮罩层来增强动感。

其实还有一种方法就是使用其他样式来模仿一个background-size:cover出来，这样就可以愉快的使用过渡了，效果如下：

思路：

页面使用flex布局
img宽度设置为：100%，保证横向铺满父盒子。
img高度设置为：auto，保证图片不失真显示。
设置img最小高度min-height:100%，保证img纵向铺满父盒子，这一步主要解决了高度设置为auto时，横向拖动浏览器窗口图片宽度改变导致纵向出现空隙。

设置所有图片居中显示，并为所在父盒子添加属性：overflow:hidden创建BFC。

      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;

为图片添伪类:hover，实现鼠标悬停图片放大的效果。

上代码！

页面结构：

<div class="life-container">
    <div class="img-card1">
      <div class="img-card1-box1">
        <img src="./upload/p1.png" alt="这张图片所在盒子高度和宽度比例差太多">
      </div>
      <div class="img-card1-box2">
        <img src="./upload/p2.png" alt="">
      </div>
    </div>
    <div class="img-card2">
      <div class="img-card2-box1">
        <img src="./upload/p3.png" alt="这张图片缩小窗口所在盒子会出现空白缝隙">
      </div>
      <div class="img-card2-box2">
        <img src="./upload/p4.png" alt="">
      </div>
      <div class="img-card2-box3">
        <img src="./upload/p5.png" alt="">
      </div>
    </div>
  </div>

CSS代码：

* {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      min-width: 1200px;
      width: 100%;
      height: 100%;
    }

/*盒子布局代码*/
    .life-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 560px;
      margin-top: 500px;
    }

    .img-card1 {
      width: 100%;
      height: 260px;
      display: flex;
    }

    .img-card1-box1 {
      flex: 2;
      height: 260px;
    }

    .img-card1-box2 {
      flex: 1;
      height: 260px;
    }

    .img-card2 {
      width: 100%;
      height: 300px;
      display: flex;
    }

    .img-card2-box1,
    .img-card2-box2,
    .img-card2-box3 {
      flex: 1;
      height: 300px;
    }

/*下面是实现功能最关键的代码，渲染出来的效果和background-size：cover的效果基本上一样，且能添加过渡*/
    .img-card1-box1,
    .img-card1-box2,
    .img-card2-box1,
    .img-card2-box2,
    .img-card2-box3 {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    img {
      width: 100%;
      height: auto;
      min-height: 100%;
      transition: all 1s;
    }

    img:hover {
      transform: scale(1.2);
    }

小结

在网上一直没有找到自己想要的答案，出现的最多的是下面这种方法，但是它无法做到完全覆盖父盒子，不是我想要的答案。

   /*图片居中然后设置如下属性*/
   img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }

值得注意的是上面使用的第一张图片是长大于宽，所以设置宽为100%,如果是使用长小于宽的图片，就要设置高为100%，后面的最小宽度也要随之改为最小高度；同时为了更好的展示图片内容，图片不一定要在盒子里居中放置，需要随机应变；理解思路即可驾驭各种尺寸的图片，完事儿！