Как правильно настроить адаптивное изображение по psd макету?

Question

[andreyWayne]

Здравствуйте, я уже час бьюсь с правильной настройкой фонового изображения
Брать полную фотографию из psd или урезаную как на макете?
Если беру полную, то не то, и также с урезанной
Пожалуйста помогите пожалуйста
Ссылка
https://yadi.sk/d/kfUn1JM73P8R3U

Answer 1

[Алексей Павлов]

Подобная проблема бывает в случае, когда в зависимости режима просмотра (ширины окна) меняется соотношение сторон - например, в широкоформатном режиме картинка в формате 2:1, а в портретном 1:1 или да же высота больше, чем ширина.
Для показа такой адаптивной картинки, в идеале нужно подготовить несколько вариантов картинки, для различных режимов просмотра, и показывать нужную картинку в зависимости от media query в css.

Comments

[andreyWayne]

Можете пожалуйста показать пример по моему psd макету? я не разбираюсь в этом, а у меня остались буквально часы

[Алексей Павлов]

Я использовал библиотеки picturefill и Owl.Carousel для адаптивных картинок и карусели.

Answer 2

[Александр Золотарев]

А что мешает взять полную и background-position её расположить? Если брать обрезаную то её растягивать надо и качество упадёт.

Comments

[andreyWayne]

я не знаю как это делать
Можете, пожалуйста, показать пример
Я понял что вы имеите ввиду, но у меня не получается ввобще...

[Александр Золотарев]

background-position: 100px 100px (тут свои значения). Их так же можно процентным соотношением задать. Ну думаю фон должен быть вставлен ackground само собой.

[alex-1917]

такие картинки (затемненные фоновые) можно и нужно растягивать, они даже лучше если размытые, концентрация на информации будет

[Александр Золотарев]

alex-1917, там на фоне человек, вам бы приятно было если ваше лицо растянули в прямоугольник?

[alex-1917]

Александр Золотарев, да, конечно, абсолютно
я имел ввиду растягивать пропорционально!!