Задать вопрос
anov

Олег Андрианов

Junior coder
Лайки

  • При смене версии NodeJS через nvm появляется ошибка exit status 1. Что это значит?

    @Joonk
    Там будет написано доступ запрещен. Необходимо програму перезапустить через администратора
    Ответ написан
    1 комментарий
    1 комментарий

  • Можно ли использовать тег picture внутри figure?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    А почему нет? picture рендерит img.
    А img же можно в figure?
    https://caninclude.glitch.me/can/include/?child=pi...
    Ответ написан
    1 комментарий
    1 комментарий

  • Можно ли растянуть изображение в контейнере с динамически определяемыми шириной и высотой?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Что значит размеры слайда динамические?
    Два варианта для картинки с object-fit
    1. Фиксированная высота слайда, картинке абсолют и обджект фит
    2. Даём слайд паддинг топ например 56%. Картинке обсолют и обджект фит. В этом случае слайды всегда будут сохранять пропорции
    Ответ написан
    2 комментария
    2 комментария

  • Как получить src из тега picture?

    0xD34F
    @0xD34F Куратор тега JavaScript 
    document.querySelector('.products__body').addEventListener('click', e => {
  const item = e.target.closest('.card-preview__item');
  if (item) {
    e.preventDefault();
    const { srcset } = item.querySelector('source');
    item.closest('.card').querySelector('.card-head__image source').srcset = srcset;
  }
});
    Ответ написан
    1 комментарий
    1 комментарий

  • DIV на всю высоту родителя?

    @jvedenin
    love2live
    На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0
    Ответ написан
    Комментировать
    Комментировать

  • Как использовать тег picture при создании адаптивных изображений?

    @IvanPsarev
    It-любитель
    Заводим тег picture внутри которого указываем дефолтную картинку:
    <picture>
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    В данном коде у нас везде просто загрузится "img/mobile.jpg".
    Как это можно улучшить? Можно использовать прогрессивные файлы изображений такие как webp (почитать про них стоит отдельно, вкратце - они меньше весят при одинаковом качестве картинки).
    Добавляем условие для показа новой картинки:
    <picture>
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    Здесь, если браузер поддерживает .webp будет загружена картинка: img/mobile.webp.
    Допустим у нас есть брейкпоинт на десктоп при 768px где нам нужно показывать картинку более высокого качества (либо вообще другую). Код можно улучшить так:
    <picture>
    <source media="(min-width:768px)" 
      srcset="img/desktop.webp"
      type="image/webp">
    <source media="(min-width:768px)"
      srcset="img/picture/desktop.jpg">
    <source srcset="img/mobile.webp" 
      type="image/webp">
    <img class="image"
      src="img/mobile.jpg"
      alt="Описание" width="260" height="260">
<picture>

    Тут мы добавили еще 2 условия: если окно шире 768px и браузер поддерживает webp - грузится desktop.webp, если не поддерживает то - desktop.jpg.
    Данную конструкцию можно еще расширить. Например мы хотим чтобы на retina-дисплеях картинки показывались в более высоком качестве. Для этого у нас должны быть копии всех наших картинок но с увеличенным в 2 раза разрешением. Например, наши картинки будут именоваться как mobile@1x.jpg (260х260рх). плюс эти же картинки, но в 2 раза большем разрешении: mobile@2x.jpg (520х520рх). Загружать их, или нет будет решать браузер, на основании данных о плотности пикселей на экрана полученных от системы (это тоже отдельная тема для обсуждения, есть статьис названием что-то вроде "Пиксель на самом деле не пиксель". Точного названия не помню, но смысл в том, что на "так называемых" Retina-дисплеях при фактическом разрешении, например, 2500х1600px браузер будет "считать", что окно шириной 1250px). Короче для "ретинизации" код нужно изменить так:
    <picture>
  <source media="(min-width:768px)" 
    srcset="img/desktop@1x.webp, img/webp/desktop@2x.webp 2x"
    type="image/webp">
  <source media="(min-width:768px)"
    srcset="img/picture/desktop@1x.jpg, img/picture/desktop@2x.jpg 2x">
  <source srcset="img/webp/mobile@1x.webp, img/webp/mobile@2x.webp 2x" 
    type="image/webp">
  <img class="image" 
    src="img/mobile@1x.jpg" 
    srcset="img/mobile@2x.jpg 2x"
    alt="Описание" width="260" height="260">
</picture>

    Вся эта громадина читается сверху:
    - первый <source>: если ширина экрана больше 768рх, браузер поддерживает webp и плотность пикселей 2x грузится desktop@2x.webp, если плотность пикселей 1х - desktop@1x.webp
    - если webp не поддерживается, то второй <source> - все тоже самое для .jpg
    - если экран уже 768px - третий <source>
    - во всех остальных случаях и в случае если браузер не поддерживает загрузится обычный <img>.
    Нужно понимать, что для такого подхода требуется иметь для одной картинки 4 файла и это только для одной ширины экрана:
    mobile@1x.jpg, mobile@2x.jpg, mobile@1x.webp, mobile@2x.webp.
    И еще столько же для desktop.
    Вот как-то так, можно добавить еще брейкпоинт для tablet - все по примеру :)
    Ответ написан
    10 комментариев
    10 комментариев