Как показывать верхнюю половину фото при адаптивной верстке?

Question

[yuliya_orlyanskaya]

Как показывать только верхнюю половину фото? Вариант с обрезкой фото или clip не подходят. Фото должно показываться четко на половину при адаптивной верстке.

Answer 1

[Алексей Николаев]

img {
    height: 200%;
    width: auto;
    object-fit: cover;
    object-position: top center;
}

Comments

[yuliya_orlyanskaya]

Спасибо за ответ. Показывает верхнюю половину фото, но при изменении размера экрана обрезает фото по бокам. Есть ли способ избежать этого?

[Алексей Николаев]

yuliya_orlyanskaya: можно использовать vw вместо процентов (тогда высота фото будет зависеть от ширины экрана, и соответственно меняться), либо привязать размер фото к контрольным точкам через медиа-запросы. Другой вариант - сделать контейнер меняющим свои размеры пропорционально, как в фиддле, например.

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

Можно это обойти при помощи скрипта на JS - вешаете триггер на событие windows.resize и при каждом изменении пересчитываете размер контейнеров. Это самое гибкое решение.

[yuliya_orlyanskaya]

Спасибо еще раз. Буду пробовать