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

Question

[webrapist]

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

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

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

В общем, как поступать в таких случаях?

Comments

[copal]

тогда Вам нужен другой макет. Макет на то и макет что он уже готовый. А Вы ХОТИТЕ мотоцикл из которого рассчитываете сделать вагон.

[webrapist]

copal: о чём вы? что конкретно искать?

Answer 1

[ForestEsprit]

1) Если есть возможность — я бы поставила парня отдельно картинкой (img), что бы он всегда был на месте, а горы уже bg cover и не важно, как они там на разных разрешениях встанут. По мне это лучший вариант.

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

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

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

5) Смириться с тем, что картинка будет разной на разных разрешениях. Можно поиграть с bg-position на разных разрешениях, может что-то получится. Неплохой пример на кидзаье самый первый блок девочка-доктор.

Answer 2

[Филипп Фастер]

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

Comments

[devstudent]

интересная идея