Возможный способ использования srcset и размеров в высокодинамичном макете - PullRequest
Новая
       27

Возможный способ использования srcset и размеров в высокодинамичном макете

0 голосов
/ 16 января 2019

Я пытался реализовать srcset на странице с высокодинамичным макетом. При этом я хочу сказать: каждое изображение имеет разный размер и будет масштабироваться в ответ на все же разные размеры. Некоторые изображения зависят от четырех точек останова.
В качестве примера (я использую Zurb Foundation): 

<div class="row">
  <div class="xlarge-4 large-6 medium-8 small-12 columns">
    <img srcset="..." />
  </div>
  <div class="xlarge-8 large-6 medium-8 small-12 columns">
    <img srcset="..." />

    <!-- some rows are nested -->
    <div class="row">
      <div class="xlarge-6 large-4 medium-6 small-4 columns">
        <img srcset="..." />
      </div>
      <div class="xlarge-2 large-6 medium-4 small-3 columns">
        <img srcset="..." />
      </div>
    </div>
  </div>
</div>

и пр.

Использование srcset без sizes не имеет смысла, поскольку на (x) большом экране он просто всегда загружает самое большое доступное изображение - ничего не сохраняется. Но заранее невозможно рассчитать размер изображения вручную, слишком много возможных комбинаций, чтобы рассчитать их все вручную - это было бы нецелесообразно при использовании сетки.

Есть ли реальный способ дать браузеру понять это самому?

...