Как обслуживать размер изображения на основе контейнера, а не размер экрана - PullRequest
Новая
       25

Как обслуживать размер изображения на основе контейнера, а не размер экрана

0 голосов
/ 19 апреля 2020

Я обыскивал отзывчивые сообщения и примеры изображений, но не могу найти решение. Кажется, что это должно быть легко, я мог бы просто что-то упустить: как бы я подал соответствующий размер изображения в зависимости от ширины контейнера, а не ширины экрана?

Т.е. у меня есть экран рабочего стола, шириной 1980px, но гибкий контейнер, который составляет 1/3 экрана, поэтому максимальный размер изображения должен составлять всего 660 пикселей в ширину, поэтому он должен показывать изображение шириной 800 Вт. Но srcset будет только go от размера экрана, поэтому даже если я отображаю миниатюры, он загрузит изображение 1200 Вт. Есть ли способ сделать это динамически. т. е. по-прежнему использовать ширину Flebox и Dynami c, но имеют ли он соответствующий размер, исходя из ширины контейнера, а не ширины экрана? Любая помощь будет принята с благодарностью, спасибо! 

<div class="flex justify-center w-1/3 mx-auto">
<img
  srcset=" srcset="size-1.jpg 400w,
  size-2.jpg 800w,
  size-3.jpg 1200w,"
  sizes=" (min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px"
/></div>

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Вы можете математически описать, насколько большое изображение будет отображаться внутри атрибута размеров. Вы можете использовать cal c () для выполнения более сложных вычислений, например, если между изображениями есть поле, и вы хотите быть точным, или если контейнер не на всю ширину.

Пример без cal c () : 

<div class="flex justify-center w-1/3 mx-auto">
  <img
    srcset="size-1.jpg 400w,
    size-2.jpg 800w,
    size-3.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33.33vw"
  />
</div>

Пример с cal c () : 

<div class="flex justify-center w-1/3 mx-auto">
  <img
    srcset="size-1.jpg 400w,
    size-2.jpg 800w,
    size-3.jpg 1200w"
    sizes="(max-width: 600px) calc(100vw - 30px), (max-width: 1200px) calc(50vw - 30px), calc(33.33vw - 30px)"
  />
</div>
0 голосов
/ 19 апреля 2020

Почему вы хотите использовать 3 разных исходных файла? Являются ли они просто разными размерами одного и того же изображения, или у вас есть совершенно разные изображения, которые вы хотите показать на каждом размере контейнера?

Если все, что вам нужно, это чтобы изображение соответствовало контейнеру, вы можете справиться с этим, просто установив один исходный файл и используя свойство CSS width: 100% Пиксели переводятся в единицу расстояния, например, в дюймы *. Устанавливая ширину изображения в единицах%, он автоматически изменяет размер изображения относительно ширины его родительского элемента, в вашем случае <div>.

Существуют и другие единицы измерения ширины, кроме% и пикс. Проверьте эту статью Единицы просмотра .

Если вы действительно хотите использовать три разных изображения в зависимости от размера контейнера, тогда вам нужно будет перечислить все три источника в списке, как вы делаете сейчас.

Эта статья должна помочь: Отзывчивые изображения В частности, этот отрывок из него: 


    <img
      sizes="(min-width: 400px) 80vw, 100vw"
      srcset="examples/images/small.jpg 375w,
              examples/images/big.jpg 1500w"
      alt="…"
    >

Информация в разметке выше дает браузеру то, что ему нужно, чтобы найти> лучшее изображение для него. Браузер знает 1) свой собственный размер области просмотра и 2)> свою собственную плотность пикселей.

Возможно, область просмотра браузера имеет ширину 320 пикселей, и это 1x дисплей. Теперь он также знает, что будет отображать это изображение на 100vw. Так что приходится выбирать между двумя представленными изображениями. Это немного математически.

375 (размер изображения № 1) / 320 (пиксели, доступные для показа изображения) = 1,17 1500 (размер изображения № 2) / 320 (пиксели, доступные для показа изображения) = 4,69

1.17 ближе к 1 (это 1-кратный дисплей), поэтому выигрывает изображение 375 Вт. Он будет пытаться> не go ниже, поэтому 1,3 будет бить 0,99, насколько я понимаю.

* Технически пиксели являются мерой угла, как градусы и радианы, и основаны на предположении о расстоянии, с которого просматривается экран.

...