Яка різниця між обкладинкою розміру фону та вмістом?

Розмір фону: обкладинка; масштабує фонове зображення, щоб воно було якомога більшим, щоб фонова область була повністю покрита фоновим зображенням. З іншого боку, background-size: contain; масштабує зображення до найбільшого розміру, щоб і ширина, і висота могли поміститися в область вмісту.28 червня 2023 р.

охоплюють і містять Ключове слово cover вказує браузеру охопити всю область елемента. content , з іншого боку, повідомляє браузеру показати все зображення. Порада: якщо ви збираєтеся працювати з піктограмами таким чином, розгляньте можливість використання векторного рішення (SVG або піктограм шрифтів).

містять. Значення contain вказує, що, незалежно від розміру вікна, що містить, фонове зображення має бути масштабовано таким чином, щоб кожна сторона була якомога більшою, але не перевищувала довжину відповідної сторони контейнера.

містити – зображення зберігає своє співвідношення сторін, але його розмір змінюється відповідно до вказаного розміру. обкладинка – зображення зберігає своє співвідношення сторін і заповнює заданий розмір. Зображення буде обрізано відповідно до розміру.

Різниця в співвідношенні сторін. Якщо використовувати обкладинку, весь екран завжди буде заповнений незалежно від співвідношення. Але при використанні 100% автоматичного режиму, якщо екран відносно вищий за саме зображення, він залишить порожній простір унизу (припускаючи, що він розташований угорі без повторення).

cover повідомляє браузеру, щоб зображення завжди покривало весь контейнер, навіть якщо йому потрібно розтягнути зображення або трохи відрізати один із країв. content , з іншого боку, каже, що завжди показувати все зображення, навіть якщо це залишає трохи місця з боків або внизу.