Как мне масштабировать фон по высоте в CSS3? - PullRequest
0 голосов
/ 04 марта 2012

Я знаю, что могу использовать cover или содержать значение для свойства 'background-size', но возможно ли масштабировать фон по высоте окна?

Я пробовал

background-size: auto contain

background-size: cover contain

оба не работали.

1 Ответ

1 голос
/ 04 марта 2012

Ключевые слова contain и cover предназначены для использования сами по себе; Вы не можете использовать их только для ширины или только для высоты фонового изображения, то есть вы не можете соединить два из них вместе. Кроме того, эти два значения будут всегда масштабировать изображение в соответствии с его соотношением сторон.

Если вы хотите сохранить соотношение сторон изображения, сохраняя все изображение видимым (содержащимся) внутри его поля, просто укажите contain для себя:

background-size: contain;

Если вы хотите сохранить только исходную ширину фонового изображения и растянуть его высоту вместе с содержащим его прямоугольником без сохранения соотношения сторон изображения, вам придется указать его ширину в пикселях и 100% для его высоты.

Так что для фонового изображения шириной 200 пикселей вы будете использовать:

background-size: 200px 100%;

Не забудьте дать вашему изображению соответствующие background-position и background-repeat.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...