Как правильно давать стили для того, что бы фото не меняло свои пропорции?

Question

[Nikita Shchypylov]

Всем привет

Подскажите, пожалуйста, какие дать стили для background, что бы фотография не растекалась, а сохраняла свой натуральный вид?

Спасибо

Answer 1

[Александр Аблизин]

background-size: cover;
background-position: center;

Comments

[Nikita Shchypylov]

Это не помешает тому, что body дан max-width: 1500px; а у фото ширина 1920?

[SagePtr]

Nikita Schipilov: фон будет уменьшен до такого размера, чтобы полностью покрыть контейнер (но отличие cover от contain в том, что если пропорции фона не совпадают с пропорциями элемента, то излишки будут обрезаны, а не появятся пустые полосы по бокам)

Answer 2

[ArturArturov]

background-size: contain

Comments

[ArturArturov]

можно добавить padding-top в процентах, так чтобы был нужный размер картинки. padding считается от ширины родителя

Answer 3

[Abdula Magomedov]

object-fit: cover;