如何解决图片裁剪的问题

Question

老师，我看到视频中的图片似乎被裁剪过了，有没有办法解决呢？

Answer 1

西门老舅 2023-09-02 20:46:49

你好，如果想让图片成比例的话，需要控制宽高跟原始图片宽高进行等比变化才行。

视频中高度固定成为了200px，所以宽度是可以通过JS动态算出来的，也就是说得到的宽度 = 原始图片宽度 / 原始图片高度 * 固定的高度200

• 提问者 hwjhuvbj #1

  老师， 我试了一下，如果要保证图片等比例的话，那就没法让图片贴紧容器的左右边缘了，因为设置了flex-grow，有剩余空间的话，图片的宽度会变化的，这个有办法解决吗

• 西门老舅 回复 提问者 hwjhuvbj #2

  如果需要左右边缘对其的话，会稍微有些不精确，但是人眼应该识别不出来的。是做了一个demo可以试一下。
      <style>
        .main {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .main .item {
          flex-grow: 1;
        }
        .main .item img {
          width: 100%;
          object-fit: cover;
          display: block;
        }
      </style>
      <div class="main">
        <div class="item">
          <img src="./imgs/1.jpg" alt="" />
        </div>
        <div class="item">
          <img src="./imgs/2.jpg" alt="" />
        </div>
         ...
      </div>
      <script>
        window.onload = window.onresize = change
        function change() {
          var imgs = document.querySelectorAll('img')
          var height = 200
          for (var i = 0; i < imgs.length; i++) {
            imgs[i].style.flexBasis =
              (imgs[i].width / imgs[i].height) * height + 'px'
            imgs[i].style.height = height + 'px'
          }
          var lastTop = imgs[imgs.length - 1].offsetTop
          for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].offsetTop === lastTop) {
              imgs[i].parentNode.style.flexGrow = 0
            } else {
              imgs[i].parentNode.style.flexGrow = 1
            }
          }
        }
      </script>