Разница между размером фона: обложкой и фоном: укажите

Ответ 1

Вы можете посмотреть на псевдокоды, которые управляют выходом. Значения, отведенные для размера изображения, напрямую зависят от пропорций соотношения сторон к контейнеру фонового изображения.

Примечание: Aspect ratio = width / height

Содержит

if (aspect ratio of container > aspect ratio of image)
    image-height = container height
    image-width = aspect-ratio-preserved width

else
    image-width = container width
    image-height = aspect-ratio-preserved height

Обложка

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

else
    image-height = container height
    image-width = aspect-ratio-preserved width

Вы видите отношение? В обоих случаях cover и contain соотношение сторон сохраняется. Но условия if - else обращаются в обоих случаях.

Это то, что делает cover для охвата полной страницы, без видимой белой части. Когда соотношение сторон контейнера больше, масштабирование изображения так, чтобы его ширина становилась равной ширине контейнера. Теперь высота будет больше, так как соотношение сторон меньше. Таким образом, он охватывает всю страницу без какой-либо белой части.

Q. Могут ли они быть заменены процентами?

Нет, не просто по процентам. Вам потребуется кондиционирование.

Q. В каких ситуациях я должен выбирать один за другим?

Когда вы создаете веб-сайт, вам не нужна белая часть на фиксированном фоне. Поэтому используйте cover.

contain, с другой стороны, можно использовать, когда вы используете повторяющийся фон (например, когда у вас есть образ изображения с очень высоким коэффициентом пропорции по veiwport/container, вы можете использовать contain и установите background-repeat в repeat-y). Но более подходящее использование для contain будет для фиксированного элемента height/width.

Ответ 2

Несмотря на то, что вопрос предполагает, что читатель уже понимает, как работают contain и cover значения для background-size, вот простой англоязычный перефразирование того, что говорит спецификация, которая может служить в качестве быстрого праймера:

• background-size: contain гарантирует, что все фоновое изображение будет соответствовать фоновой области, сохраняя исходное соотношение сторон. Если область фона меньше, чем изображение, изображение будет уменьшаться, так что оно может соответствовать области фона. Если область фона выше или выше изображения, то любые части области, не занятые основным изображением, будут заполняться повторами изображения или почтовых ящиков/whitespace, если для параметра background-repeat установлено значение no-repeat.

• background-size: cover делает фоновое изображение настолько большим, насколько возможно, чтобы оно заполнило всю область фона, не оставляя пробелов. Разница между cover и 100% 100% заключается в том, что соотношение сторон изображения сохраняется, поэтому не происходит неестественного растяжения изображения.

Обратите внимание, что ни одно из этих двух значений ключевых слов не может быть выражено с использованием любой комбинации длин, процентов или auto ключевых слов.

Итак, когда вы используете один над другим? Лично я считаю, что cover имеет более практическое применение, чем contain, поэтому я пойду первым. ¹

размер фона: обложка

Один общий пример использования background-size: cover находится в полноэкранном формате, где фоновое изображение богато подробно, например, фотография, и вы хотите, чтобы этот образ отображался на видном месте, хотя и в качестве фона в отличие от основного содержание.

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

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

html {
    height: 100%;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    width: 80%;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 5em auto;
    padding: 1em;
}

Если вы используете background-size: contain, вместо этого происходит то, что фоновое изображение сжимается, чтобы все изображение соответствовало области предварительного просмотра. Это оставляет уродливые белые почтовые ящики вокруг изображения в зависимости от соотношения сторон панели предварительного просмотра, что разрушает эффект.

background-size: содержать

Итак, зачем использовать background-size: contain, если он оставляет уродливые пробелы вокруг изображения? Один случай использования, который сразу приходит в голову, заключается в том, что дизайнеру не нужны пустые пространства, если все изображение помещается в область фона.

Это может показаться надуманным, но подумайте, что не все изображения выглядят плохо с пустым пространством вокруг него. Именно здесь пример использования логотипа вместо фотографии на самом деле демонстрирует это наилучшим образом, даже если вы, вероятно, не будете использовать логотип в качестве фонового изображения.

Логотип, как правило, имеет неправильную форму, сидящую на пустом или полностью прозрачном фоне. Это оставляет холст, который может быть заполнен сплошным цветом или другим фоном. Использование background-size: contain гарантирует, что все изображение будет соответствовать фону без каких-либо его частей, но изображение по-прежнему выглядит прямо у себя на холсте.

Но это не обязательно должно применяться к изображению неправильной формы. Он также может применяться к прямоугольным изображениям. Пока вы требуете, чтобы не было обрезки фонового изображения, пробел можно рассматривать как разумный компромисс или вообще не иметь большого значения. Помните макеты фиксированной ширины? Подумайте о background-size: contain, по существу, о том, что, но для фоновых изображений и в портретной и ландшафтной ориентации: если вы можете гарантировать, что контент всегда будет соответствовать границам фонового изображения в любое время, тогда пробелы становятся вообще не относящимися к проблеме.

Хотя background-size: contain будет работать независимо от того, настроено ли изображение для повтора, я не могу придумать никаких хороших вариантов использования, связанных с повторением фона.

¹ _{Обратите внимание, что если вы используете gradient в качестве фона, contain и cover не имеют эффекта, потому что градиенты не имеют каких-либо внутренних размеров. В обоих случаях градиент будет растягиваться, чтобы покрыть контейнер, как если бы вы указали 100% 100%.}

Ответ 3

background-size:cover покроет весь div изображением. Это может быть полезно для показа миниатюрных изображений основного изображения, когда все отображаемое изображение не так важно, но вы все равно хотите соответствовать размеру всех изображений. (например, выдержка из блога)

background-size:contain покажет все изображение внутри div. Это может быть полезно, если вы специально хотите отобразить все изображения, но в пределах заданного размера контейнера контейнера. (Например, коллекция логотипов компании)

Оба сохраняют изображение с одинаковым соотношением сторон

http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

Ответ 4

background-size:contain;

При использовании contain вы все равно можете видеть белый интервал из-за того, что он размер и содержит себя внутри элемента.

background-size:cover;

полностью покрывает указанный элемент, вы не увидите никакого белого интервала

Источник:

http://www.css3.info/preview/background-size/

см. пример H

edit: используйте background-size:contain, если: Вы хотите, чтобы ваше изображение всегда отображалось в окне просмотра. Обратите внимание, что: пока вы можете видеть полное изображение, он будет оставлять белый интервал в верхней или нижней части изображения, если пропорции браузера и окна не совпадают.

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

источник: http://alistapart.com/article/supersize-that-background-please

Ответ 5

Содержит: - масштабируйте изображение до наибольшего размера, чтобы его ширина и высота могли вписываться в область содержимого. Exmaple: Обложка: -Установите фоновое изображение как можно большим, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в области фонового позиционирования. Пример:

Ответ 6

У нас был огромный разговор об обложке и содержании, просто хочу поделиться этими мыслями:

1. пейзажное изображение на ландшафтном экране - лучше всего использовать обложку

2. портретное изображение на ландшафтном экране - лучше всего использовать, содержать

3. портретное изображение на ландшафтном экране - лучше всего использовать, содержать

4. портретное изображение на ландшафтном экране - лучше всего использовать, содержать

Иллюстрация:

if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen

https://codepen.io/Kinosura/pen/EGZbdy?editors=1100