Object-fit: содержит разрывы в исходном наборе адаптивных изображений ⇐ CSS

[Anonymous]

У меня есть простой сценарий, в котором левая часть экрана представляет собой статическое изображение, а правая прокручивается в зависимости от содержимого. Ширина левой стороны зависит от размера экрана. Что-то вроде «если больше 1600: 50%; если от 800 до 1600 — 300 пикселей; если меньше — 200 пикселей» (пример).
Я хочу использовать изображение вместе с набором источников. , чтобы я мог заставить браузер заменять изображения. Дело в том, что если я получу разрешение 1500, изображение должно быть шириной всего 300 пикселей, но я использую полноценный 4К. Высота изображения всегда равна 100vh (весь экран).
Я использую object-fit: Cover на изображении, и это отлично работает (позиционирование это в самый раз, как и в случае с фоновым изображением).
Я применил соответствующие размеры с помощью srcset.

Проблема: объединение соответствия объектов: Cover с набором исходных данных и размерами приводит к тому, что браузер не может правильно загрузить соответствующее изображение. Вот живой пример проблемы (поскольку кто-то другой пытался заставить ее работать, но на самом деле это не работает):
https://roelfjan.github.io/object-fit -cover/
Ознакомьтесь со вторым примером: «Изображение с адаптивным поведением (атрибут srcset)». Вы можете легко увидеть, что изображение имеет несколько вариантов отображения:

Код: Выделить всё

[img]example-images/[email protected][/img]
  srcset="example-images/[email protected] 2400w,
example-images/[email protected] 1200w,
example-images/[email protected] 800w,
example-images/[email protected] 400w"
sizes="(min-width: 1200px) 1170px,
(min-width: 992px) 970px,
(min-width: 768px) 750px,
100vw"
alt="Example 2" />

Можно предположить, что если экран имеет ширину 800 пикселей, изображение будет отображаться как изображение размером 750 пикселей, поэтому ему следует получить изображение шириной 800 пикселей? Что ж, если вы проверите вкладку «Сеть» (и вы также увидите ее видимой, поскольку размеры указаны в центре изображения) — вы увидите, что исходное отображаемое изображение имеет размер 1200x800 (на экране 500 пикселей). Единственный раз, когда это меняется, это примерно 680 пикселей, когда загружается и отображается вдвое больший (2400x1600). Все это заставляет меня думать, что здесь что-то не так. Или что мне не хватает? Протестировано как в Chrome, так и в FF.

Теперь мой сценарий может быть немного проще, на данный момент у меня есть только горизонтальные изображения. , а мой рост всегда 100vh. Это означает, что я могу рассчитать (даже в CSS) необходимую ширину изображения, которое будет отображаться. Я говорю все это, потому что буду рад любому хаку, который вы знаете

Подробнее здесь: https://stackoverflow.com/questions/793 ... age-srcset