Масштабирование полноэкранного изображения на мобильном телефоне

Question

Я работаю над сайтом, где главная страница состоит из заголовка (около 200 пикселей в высоту) и полноэкранного слайдера (который занимает оставшееся пространство в браузере). Как обычно, все хорошо выглядит на рабочем столе и планшетах, но я не могу получить правильные пропорции для мобильных устройств. Изображения устанавливаются с помощью свойства background-image, и я уже играл с параметрами background-size, max-width, height, overflow и т. Д., И у меня все из идей. Я могу поддерживать правильные пропорции с помощью max-width: 100%, height: auto, background-size: cover и тому подобное, но в итоге я получаю пустое пространство внизу изображения.

Чтобы добавить к этому изображения, используются оригиналы 1500 x 600 (на данный момент), поэтому даже при мобильном масштабировании пропорционально содержимое внутри изображения становится трудно читаемым.

You can see the site here

я есть поиск по Сети и на самом деле не нашли подходящий ответ еще, и я из идей о том, как масштабировать эти изображения должным образом, а также продолжать, чтобы они занимают остальные пространство в браузере - все это при сохранении области фокусировки изображения, ориентированного на содержимое. Я знаю JS-плагины, которые могут помочь с этой проблемой, но я выбираю подход CSS, потому что изображения будут получены из загрузок WordPress.

Я застрял, поэтому любые отзывы от сообщества будут оценены!

Answer 1

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

Answer 2

набор носителей для запроса месте изображения в контейнере

В CSS

@media только экран и (макс-ширина: 40em) {

.hero-slide.slick -slide {

background-size: contain; 

}

}