Блог

Главная - Вопросы по программированию - Адаптивное изображение, элемент изображения для загрузки нескольких изображений/форматов

Адаптивное изображение, элемент изображения для загрузки нескольких изображений/форматов

#html #responsive-design #lazy-loading #image-fallback

Вопрос:

Нужна помощь/правильный способ реализации адаптивного изображения и нескольких форматов файлов в элементе изображения, используя lazysizes-aFarkas. Пример кода выглядит следующим образом:

 <picture>
 <source data-scrset="example.jpg" type="image/jpeg" media="(max-width: 736px)"/>
 <source data-scrset="example.webp" type="image/webp"/>
 <img class="lazyload" data-src="example.png" type="image/png" alt="fallback"/>
</picture>

Буду признателен за любую помощь 🙂

Ответ №1:

Попробуйте это :

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
</style>
</head>
<body>
<img class="responsive" src="https://via.placeholder.com/600x400.webp" alt="PlaceHolder" onError="this.onerror=null;this.src='https://via.placeholder.com/600x400.png';" />
</body>
</html>

Также здесь есть JSFiddle. чтобы проверить это.

Метки: ,