Вопрос по image, responsive-design, html, srcset – Могу ли я использовать <picture> для изображений с ограничением по высоте и ширине?

5

У меня есть что-то вроде слайд-шоу, где изображения будут увеличиваться настолько, насколько они могут, но не превышать ширину или высоту области просмотра. В принципеobject-fit: contain.

Я бы хотел, чтобы эти изображения были адаптивными, поскольку «как можно больше» для телефона и большого большого рабочего стола - это большая разница. Я не могу использовать<img srcset> потому что сейчас, это только делает плотность экрана (x дескрипторы) или ширина (w дескрипторы). Так что уходит<picture> вручную сделать логику выбора.

Я начал с:

<picture>
  <source media="(orientation:portrait)"
          sizes="(max-width: 1200px) 100vw, 1200px"
          srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
  <source sizes="(max-width: 1200px) 100vw, 1200px"
          srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
  <img src="default.jpg" alt="a man slipping on a banana peel">
</picture>

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

в идеале <img srcset> будутполучитьh дескриптор скоро, но я хотел бы взломать что-то вместе, что будет работать сейчас.

Моя голова в настоящее время не работает, но вам нужно только изменить размеры, и если вы все делаете с JS, вам нужно вычислить только одно значение размеров в пикселях, так что не так сложно. (Я мог бы попытаться сделать плагин lazySizes для этого). alexander farkas
Для базового подтверждения концепции, да, это будет весь видовой экран, но при производстве это будут изображения внутри различных контейнеров. Tigt
В общем, если это всегда область просмотра, а не элемент меньшего размера, который вы используете, чем у вас, если он ограничен по ширине всегда sizes = "100vw" и если это ограничен по высоте размеры = "calc (100vh * (heightOfImage / widthOfImage)) " alexander farkas

Ваш Ответ

1   ответ
5

Я думаю, что я получил это (1/2) равно (ширина / высота):

<img 
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w"
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1 / 2))"
    />

Или с большим количеством кода:

<img
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w"
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1 / 2)), 100vw"
    />

В качестве примечания: я также написал скрипт, который автоматически вычисляет правильные размеры для родительских размеров, ограниченных по высоте / ширине. Смотрите здесьродительский сценарий.

хорошо, так что я делаю, это вставить соотношение сторон изображения? для пейзажного изображения с коэффициентом 1,5, который отображается max-with & max-height 90%, я могу использовать это: size = "(min-aspect-ratio: 1.5) 90vh, 90vw" это правильно? w.stoettinger
Для очень тонких видовых экранов я бы подкрепил это(max-aspect-ratio: 1/2) также? Tigt
aspect-ratio! Почему я этого не помню?calc также высоко ценится. Tigt
Я долго искал, чтобы найти это! большое спасибо w.stoettinger

Похожие вопросы