Поддерживать пропорции изображений в Chrome во время собственной ленивой загрузки - PullRequest
Новая
       18

Поддерживать пропорции изображений в Chrome во время собственной ленивой загрузки

3 голосов
/ 04 апреля 2020

Обновление: Оказывается, это связано с ошибкой в Chrome. Я все еще ищу обходных путей .

Я пытаюсь использовать отложенную загрузку в Chrome, установив loading="lazy" для img элементов. Я также использую следующее для подгонки изображений: 

img {
  max-width: 100%;
  height: auto;
}

К сожалению, заполнитель изображения, который отображается перед фактической загрузкой изображения, имеет квадратное соотношение сторон в Chrome. Он не соответствует соотношению сторон, установленному в атрибутах width / height элемента img. Это происходит при следующих условиях:

  • Только в Chrome (не в Firefox 75, который также поддерживает отложенную загрузку).
  • Только при установке loading="lazy". Без этого атрибута соотношение сторон сохраняется.

Существует ли решение для сохранения соотношения сторон изображения, установленного в width / height, даже при ленивой загрузке ?

Вот статья , предлагающая, что то, что я делаю, должно работать. Пожалуйста, также посмотрите встроенное видео в статье, сказав то же самое.

Вы можете наблюдать проблему с примером ниже, если регулирование скорости сети с помощью инструментов разработчика Chrome. Я включил запись экрана, чтобы проиллюстрировать проблему. Я не хочу, чтобы размер изображения изменялся после загрузки, поскольку это приводит к смещению элементов страницы.

enter image description here

Минимальный пример

HTML: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium nibh tellus, ac luctus erat viverra sed. Aliquam sed nisi sed sapien tempus consectetur vestibulum vel diam. Ut vel faucibus metus. Donec non sem et purus luctus dictum nec et elit. Suspendisse et ipsum tortor. Proin eros massa, pulvinar a ante eu, imperdiet consequat dolor. Pellentesque sed lacus nulla. Mauris gravida purus sed facilisis sollicitudin.
</p>
<p>
    <img src="image.png" width="850" height="422" loading="lazy">
</p>
<p>
Vivamus sagittis faucibus elit non feugiat. Curabitur interdum nulla sed ligula pharetra, in faucibus tortor ullamcorper. Curabitur tristique libero in lobortis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque quis velit sed tellus aliquet dictum. Fusce vitae consectetur lacus. In scelerisque varius euismod. Nunc scelerisque enim quis lacus dignissim tincidunt. Nulla suscipit, odio eu dictum condimentum, massa elit vestibulum leo, ut lobortis dolor felis vel erat. Cras dapibus, nunc eget sollicitudin semper, elit nisl dictum leo, non semper quam nunc consequat augue. Vivamus bibendum mauris sapien, vel sagittis urna consequat ut.
</p>
</body>
</html>

CSS: 

body {
    max-width: 600px;
    padding: 20px;
}

img {
    border: solid black;
    max-width: 100%;
    height: auto;
}

Изображение:

enter image description here

1 Ответ

2 голосов
/ 06 апреля 2020

Codesandbox DEMO (исходный код)

Возможно класс c padding- топ хак может помочь как обходной путь . 

body {
  max-width: 600px;
  padding: 20px;
}

img {
  border: solid black;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

@supports (--foo: 1) {
  .aspect,
  .aspect-inline {
    position: relative;
  }

  .aspect {
    padding-top: calc(var(--height) / var(--width) * 100%);
    height: 0;
    display: block;
  }

  .aspect-inline {
    display: inline-block;
    vertical-align: middle;
  }

  .aspect img,
  .aspect-inline img {
    position: absolute;
    top: 0;
    max-height: 100%;
  }
}
<p>
  <picture class="aspect-inline" style="width: 50px; height: 24.8px">
    <img
      src="https://i.stack.imgur.com/SII5r.png"
      loading="lazy"
      width="50"
      height="24,8"
    />
  </picture>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium
  nibh tellus, ac luctus erat viverra sed. Aliquam sed nisi sed sapien
  tempus consectetur vestibulum vel diam. Ut vel faucibus metus. Donec non
  sem et purus luctus dictum nec et elit. Suspendisse et ipsum tortor. Proin
  eros massa, pulvinar a ante eu, imperdiet consequat dolor. Pellentesque
  sed lacus nulla. Mauris gravida purus sed facilisis sollicitudin.
</p>
<p>
  <picture class="aspect" style="--width: 850; --height: 422">
    <img
      src="https://i.stack.imgur.com/SII5r.png"
      loading="lazy"
      width="850"
      height="422"
    />
  </picture>
</p>
<p>
  Vivamus sagittis faucibus elit non feugiat. Curabitur interdum nulla sed
  ligula pharetra, in faucibus tortor ullamcorper. Curabitur tristique
  libero in lobortis posuere. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Quisque quis velit sed
  tellus aliquet dictum. Fusce vitae consectetur lacus. In scelerisque
  varius euismod. Nunc scelerisque enim quis lacus dignissim tincidunt.
  Nulla suscipit, odio eu dictum condimentum, massa elit vestibulum leo, ut
  lobortis dolor felis vel erat. Cras dapibus, nunc eget sollicitudin
  semper, elit nisl dictum leo, non semper quam nunc consequat augue.
  Vivamus bibendum mauris sapien, vel sagittis urna consequat ut.
</p>
...