Подгонка объекта: Обложка и Srcset

Question

Я использую object-fit: cover на кучу изображений. Рамка для изображения занимает 50vw и имеет динамическую высоту. Атрибут cover работает отлично, но это означает, что я не знаю, насколько широким будет мое фактическое изображение в данный момент времени.

Скорее всего, он будет шире, чем 50vw и его переполнение будет скрыто из-за прилегающей крышки.

Проблема возникает, когда я пытаюсь использовать srcset. Я не могу дать надежную ширину для атрибута размеров.

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

Answer 1

У вас возникает вопрос о арт- директорстве в сочетании с проблемой доставки контента. Художественное направление существенно зависит от решений, которые вы принимаете в отношении формата вашего контента (например, когда вы ссылаетесь на изображения: широкое изображение, крупный план, портрет, квадрат и т. Д.), Решение состоит в том, чтобы создавать разные обрезанные версии вашей фотографии и использовать их. соответственно сsrcset атрибут, например, у вас может быть широкое изображение, которое на маленьком экране должно быть "обрезано", поэтому вы можете использовать что-то вроде этого:

<picture>
  <source media="(max-width: 799px)" srcset="wide-image-480w-close-up.jpg">
  <source media="(min-width: 800px)" srcset="wide-image-800w.jpg">
  <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

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

Ваш случай, похоже, зависит как от высоты, так и от ширины контейнера изображения, поэтому вам следует искать точки останова в своих соотношениях сторон, поэтому в примере следует указать aspect-ratio Правило как это

<picture>
  <source media="(min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">
  <source media="(max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">
  <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

Однако в некоторых случаях вам может потребоваться более детальный контроль, поскольку соотношение сторон и ширина области просмотра могут не коррелировать с используемым изображением, поэтому вы также должны следить за шириной, это достигается с помощью and оператор в вашем @media правило, поэтому приведенное выше может объединиться в это:

<picture>
   <source media="(max-width: 799px) and (min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">
   <source media="(min-width: 800px) and (max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">
   <img src="wide-image-800w.jpg" alt="A wide image">
</picture>

В заключение я хотел бы отметить, что есть отличные сервисы, которые предоставляют мощные API для обработки изображений, которые упрощают подобные проблемы, а также есть отличный контент в Интернете, касающийся художественного направления и доставки исходного контента, особенно на веб-сайте MDN, здесь

Answer 2

Вот мой ответ на проблему, с которой я столкнулся с динамическими изображениями и сохранением пропорций с помощью подгонки объекта: cover:

Исправление IE и Edge для подгонки объекта: обложка;

Я надеюсь, что это может кому-то помочь.

Answer 3

Вместо использования подгонки объекта: обложка; вы могли бы использовать

width:100%;
height: auto;

Таким образом, ширина всегда будет 50vw, а высота будет оставаться динамичной

Answer 4

Вы можете указать srcset на основе медиа-запросов, сначала выясните соотношение изображения. затем вы можете определить, насколько изображение будет видно в 50vw на каждом размере экрана.

Answer 5

Вы можете добавить ширину, высоту, минимальную и максимальную ширину или высоту в качестве атрибутов в srcset, как это.

 <picture>
   <source srcset="images/w350/1.png" media="(max-width: 576px)" width="358px"
                  height="250px">
   <source srcset="images/w500/1.png" media="(max-width: 991px)" width="502px"
                  height="350px">
   <img src="images/1.png" data-src="images/1.png">
 </picture>

Answer 6

Это не дает конкретного ответа на этот вопрос, но, в конце концов, если ничего не помогает... можно мыслить нестандартно, и если семантика не является проблемой (хотя часто и так), то все равно можно использовать background-imageи пусть это отображается условно по медиа-запросу. Если медиа-запрос не найден, он не загрузитbackground-image внутри и background-size имеет лучшую поддержку, чем object-fit тем не мение.

Answer 7

Не уверен, но это то, что я делаю почти для всех моих динамических изображений:

Я делаю <div> и сделайте его любым нужным мне размером, и установите встроенное изображение как bg div (вызывайте большинство шаблонных языков, которые вы не можете установить в CSS).

.ratio {
  width: 50vw;
}

.ratio-4-3 {
  padding-top: 75%;
}

.vh-100 {
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="flex-child">
    <div class="ratio ratio-4-3"style="background: url('https://i.cdn.turner.com/adultswim/big/img/2018/05/07/rick-and-morty.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
    <div class="flex-child">
    <div class="ratio vh-100"style="background: url('https://cnet3.cbsistatic.com/img/NMPqQxi-Gbz3JS9Q1BpqpMfG-AQ=/1600x900/2017/03/24/80d3cf97-5aae-4750-b856-53c89005dbc1/rickandmorty3.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
</div>