swibong
@swibong
No system is safe.

Как быть с изображениями при резиновой вёрстке?

К примеру, есть такой макет: freepsd.ws/besplatnyj-psd-mountains-landing-page

Я хочу сделать так, чтобы страничка растягивалась по ширине экрана. Как в этом случае поступить с изображением, которое занимает всю ширину? (Например то, что в хедере).

Что с ним будем при масштабировании? Получается, что изображение будет выглядеть по-разному на различных разрешениях? Ведь если использовать background-size: cover; - оно вроде по-разному отображается, в зависимости от размеров блока.

В общем, как поступать в таких случаях?
  • Вопрос задан
  • 425 просмотров
Решения вопроса 1
@ForestEsprit
HTML - верстальщик
1) Если есть возможность — я бы поставила парня отдельно картинкой (img), что бы он всегда был на месте, а горы уже bg cover и не важно, как они там на разных разрешениях встанут. По мне это лучший вариант.

2) Обсудить это с дизайнером, объяснить ему суть проблемы (лучше набросать прототип), возможно дизайнер сам предложит решение. (Вариант на тот случай, если работаете с дизайнером).

3) Понадобится большая картинка, которую стоит подгружать на больших разрешениях (например от 1440 грузите картинку, у которой есть дополнительные поля с горами). Тогда можно сохранить макет неизменным.

4) не растягивать картинку на всю ширину. Я понимаю, о чём вы спрашиваете, но если надо сохранить макет в таком виде, а это максимальный размер картинки, почему бы не отказаться от растягивания на 100vw и не задать максимальную ширину header на 1280 (например).

5) Смириться с тем, что картинка будет разной на разных разрешениях. Можно поиграть с bg-position на разных разрешениях, может что-то получится. Неплохой пример на кидзаье самый первый блок девочка-доктор.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
phfaster
@phfaster
Прогрессивный веб-разработчик
Я делаю fade, тень, уходящую в фоновый цвет (монотонный), по краям. Получается когда ширины изображения не будет хватать на нормальное отображение, будет просто плавный переход в монотонный цвет (очень красиво и стильно):)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы