css — В чем разница между background-size: cover; и размер фона: 100%;?
спросил
Изменено 2 года, 2 месяца назад
Просмотрено 23 тысячи раз
Когда я устанавливаю для свойства background-size изображения div значение background-size: cover; или размер фона: 100%; оба выглядят одинаково.
Какая разница? Когда я должен использовать укрытие, а когда 100%?
- css
- размер фона
1
cover = Максимально масштабируйте фоновое изображение, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут быть не видны в области позиционирования фона
В основном масштаб увеличивается до тех пор, пока самые внутренние края не соприкоснутся со стороной, что означает, что часть изображения может быть обрезана, в отличие от 100%, когда все изображение будет видно.
Если бы он не увеличивал масштаб, вы бы получили две стороны, которые достигают края, но на другой оси у вас были бы пустые горизонтальные (или вертикальные) «полосы» с обеих сторон изображения в одном из этих направления.
Ваш вопрос : Почему они должны выглядеть одинаково ?
Ответ : Если изображение/контейнер квадратные
См. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover например
0
вот скрипка: http://jsfiddle.net/RS5kX/19/
background-size:100%; = background-size:100% auto; = ширина устанавливается равной 100%, а высота фонового изображения соответствует соотношению сторон изображения.
background-size:cover; означает, что фоновое изображение всегда будет соответствовать всему div , у вас не останется пустых мест в вашем div
background-size:100% 100%
также не оставит пустого места, но, конечно, это нарушит исходное соотношение сторон изображения
2
Довольно точно background-size: обложка; означает, что изображение будет заполнять элемент, сохраняя его соотношение сторон, а background-size: 100%; просто заставит изображение заполнить 100% ширины элемента.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Документация JDK 19 — Главная
