时间戳

首页 > 解决方案 > 延迟加载高大的图像被拉伸或裁剪

javascript - 延迟加载高大的图像被拉伸或裁剪

问题描述

图像被垂直拉伸，有时被垂直裁剪。

如果我尝试不设置图像的高度，.ratio__content则会与其他图像重叠

查看实际图像

（实现伸展或裁剪的高度实际上很高）

body {
  max-width: 960px;
  margin: auto;
}

img {
  max-width: 100%;
}

.ratio {
  margin-bottom: 10px;
  position: relative;
  display: block;
}

.ratio:before {
  content: '';
  display: block;
  width: 100%;
  padding-bottom: calc((9/16) * 100%);
}

.ratio__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
<div class="ratio"><img class="ratio__content lazyload" data-src="https://binazizcorp.com/download.jpg"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://binazizcorp.com/1606279905.jpg"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://binazizcorp.com/1606279905.jpg"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://binazizcorp.com/1606279905.jpg"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://binazizcorp.com/1606279905.jpg"></div>

<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=9"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=10"></div>

<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></script>

我该如何解决这个问题？

标签： javascript

解决方案

推荐阅读