-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
translation(CSS): web/css/background-size (#723)
* translation(CSS): web/css/background-size * update(CSS): web/css/background-size
- Loading branch information
Showing
1 changed file
with
174 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| --- | ||
| title: background-size | ||
| slug: Web/CSS/background-size | ||
| page-type: css-property | ||
| tags: | ||
| - CSS | ||
| - CSS Background | ||
| - CSS Property | ||
| - Reference | ||
| - recipe:css-property | ||
| browser-compat: css.properties.background-size | ||
| --- | ||
|
|
||
| {{CSSRef}} | ||
|
|
||
| Властивість [CSS](/uk/docs/Web/CSS) **`background-size`** (розмір тла) задає розмір зображення тла елемента. Зображення може зберегти свій природний розмір, бути розтягнутим чи обмеженим для вміщення в доступний простір. | ||
|
|
||
| {{EmbedInteractiveExample("pages/css/background-size.html")}} | ||
|
|
||
| Проміжки, не перекриті зображеннями тла, заповнені властивістю {{cssxref("background-color")}}, а також колір тла буде видимим крізь зображення тла, що мають прозорість чи напівпрозорість. | ||
|
|
||
| ## Синтаксис | ||
|
|
||
| ```css | ||
| /* Значення – ключові слова */ | ||
| background-size: cover; | ||
| background-size: contain; | ||
|
|
||
| /* Синтаксис одного значення */ | ||
| /* ширина зображення (висота стає 'auto') */ | ||
| background-size: 50%; | ||
| background-size: 3.2em; | ||
| background-size: 12px; | ||
| background-size: auto; | ||
|
|
||
| /* Синтаксис двох значень */ | ||
| /* перше значення – ширина зображення, друге значення – висота */ | ||
| background-size: 50% auto; | ||
| background-size: 3em 25%; | ||
| background-size: auto 6px; | ||
| background-size: auto auto; | ||
|
|
||
| /* Декілька фонів */ | ||
| background-size: auto, auto; /* Не плутати з `auto auto` */ | ||
| background-size: 50%, 25%, 25%; | ||
| background-size: 6px, auto, contain; | ||
|
|
||
| /* Глобальні значення */ | ||
| background-size: inherit; | ||
| background-size: initial; | ||
| background-size: revert; | ||
| background-size: revert-layer; | ||
| background-size: unset; | ||
| ``` | ||
|
|
||
| Властивість `background-size` задається в один з наступних способів: | ||
|
|
||
| - За допомогою значень – ключових слів `contain` і `cover`. | ||
| - За допомогою виключно значення ширини, у випадку чого висота отримує усталене значення `auto`. | ||
| - За допомогою значень і ширини, і висоти, у випадку чого перше значення задає ширину, а друге – висоту. | ||
| Кожне значення може бути {{cssxref("<length>")}}, {{cssxref("<percentage>")}} чи `auto`. | ||
|
|
||
| Щоб задати розмір кількох зображень тла, кожне зі значень слід відділити комою. | ||
|
|
||
| ### Значення | ||
|
|
||
| - `contain` (вміщати) | ||
| - : Робить зображення настільки великим, наскільки можливо при тому, щоб воно вміщалось в контейнері без обрізання чи розтягування зображення. Якщо контейнер – більший за зображення, то це призведе до того, що зображення вкриє контейнер черепицею, якщо властивість {{cssxref("background-repeat")}} не має значення `no-repeat`. | ||
| - `cover` (накриття) | ||
| - : Масштабує зображення (зберігаючи його співвідношення сторін) до найменшого можливого розміру, при якому воно зможе заповнити контейнер (тобто щоб і його висота, і його ширина повністю _накривали_ контейнер), не залишаючи незаповненого простору. | ||
| Якщо пропорції тла відрізняються від пропорцій елемента, то зображення обрізається, або по вертикалі, або по горизонталі. | ||
| - `auto` (автоматично) | ||
| - : Масштабує зображення тла за відповідним напрямом так, щоб зберігалися його природні пропорції. | ||
| - {{cssxref("<length>")}} | ||
| - : Розтягує зображення за відповідним розміром до вказаної величини. Від'ємні значення не дозволені. | ||
| - {{cssxref("<percentage>")}} | ||
| - : Розтягує значення за відповідним розміром до вказаної величини у відсотках від _області розташування тла_. | ||
| Область розташування тла визначається значенням {{cssxref("background-origin")}} (усталено це рамки внутрішніх полів). | ||
| Проте якщо значення {{cssxref("background-attachment")}} – `fixed`, то область розташування – це вся {{glossary("viewport", "область перегляду")}}. | ||
| Від'ємні значення не дозволені. | ||
|
|
||
| ### Природні розміри й пропорції | ||
|
|
||
| Обчислення значень залежить від природних розмірів зображення (ширини й висоти) й природних пропорцій | ||
|
|
||
| - Зображення – бітова карта (як то JPG) завжди має природні розміри та пропорції. | ||
| - Векторне зображення (як то SVG) не обов'язково має природні розміри. | ||
| Якщо воно має і горизонтальний, і вертикальний природний розмір, то має і природні пропорції. | ||
| Якщо воно не має розмірів або має лише один, то може мати, а може і не мати пропорцій. | ||
| - {{cssxref("<gradient>")}} CSS не має природних розмірів чи природних пропорцій. | ||
| - Зображення тла, створені за допомогою функції {{cssxref("element", "element()")}}, використовують природні розміри та пропорції елемента, що їх породжує. | ||
|
|
||
| > **Примітка:** У Gecko зображення тла, створене за допомогою функції [`element()`](/uk/docs/Web/CSS/element), наразі обробляються як зображення, чиї розміри дорівнюють розмірам елемента або, якщо елемент – це SVG, то області розташування тла, з відповідною природною пропорцією. Це нестандартна поведінка. | ||
|
|
||
| Візуалізований розмір зображення тла обчислюється на основі природних розмірів та пропорцій, отак: | ||
|
|
||
| - **Якщо задані обидві частини `background-size`, і вони не `auto`:** Зображення тла візуалізується згідно з заданим розміром. | ||
| - **Якщо `background-size` має значення `contain` чи `cover`:** Зображення візуалізується зі збереженням природних пропорцій, у найбільшому можливому розмірі, що вміщається у чи повністю накриває область розташування тла. | ||
| Якщо зображення не має природних пропорцій, воно візуалізується згідно з розміром області розташування тла. | ||
| - **Якщо `background-size` має значення `auto` чи `auto auto`:** | ||
|
|
||
| - Якщо зображення має і горизонтальний, і вертикальний природний розмір, то воно візуалізується з цими розмірами. | ||
| - Якщо зображення не має ані природних розмірів, ані природних пропорцій, то воно візуалізується з розмірами області розташування тла. | ||
| - Якщо зображення не має природних розмірів, але має природні пропорції, воно візуалізується так, ніби було задано `contain`. | ||
| - Якщо зображення має лише один природний розмір і має природні пропорції, воно візуалізується з розмірами, що відповідають природному розмірові. | ||
| Розмір за іншим виміром обчислюється на основі заданого розміру й природних пропорцій. | ||
| - Якщо зображення має природний розмір лише за одним виміром, але не має природних пропорцій, воно візуалізується згідно з заданим розміром, а розмір за іншим виміром береться в області розташування тла. | ||
|
|
||
| > **Примітка:** Зображення SVG мають атрибут [`preserveAspectRatio`](/uk/docs/Web/SVG/Attribute/preserveAspectRatio), що має усталене значення `contain`; явна `background-size` призводить до ігнорування `preserveAspectRatio`. | ||
|
|
||
| - **Якщо `background-size` містить одну частину `auto`, а іншу – не `auto`:** | ||
|
|
||
| - Якщо зображення має природні пропорції, воно розтягується до заданого розміру. | ||
| Невказаний вимір обчислюється на основі заданого розміру та природних пропорцій. | ||
| - Якщо зображення не має природних пропорцій, воно розтягується до заданого розміру. | ||
| Невказаний розмір обчислюється на основі відповідного природного розміру зображення, якщо таке є. | ||
| Якщо такого природного розміру немає, то результівним значенням стає відповідний розмір області розташування тла. | ||
|
|
||
| > **Примітка:** Калібрування фонів з векторними зображеннями, котрі не мають природних розмірів та пропорцій, поки не повністю реалізоване в усіх браузерах. | ||
| > Будьте обережними, покладаючись на описану вище логіку, і перевіряйте в різних браузерах, аби мати певність, що результати є прийнятними. | ||
|
|
||
| ## Формальне визначення | ||
|
|
||
| {{cssinfo}} | ||
|
|
||
| ## Формальний синтаксис | ||
|
|
||
| {{csssyntax}} | ||
|
|
||
| ## Приклади | ||
|
|
||
| ### Черепиця з великим зображенням | ||
|
|
||
| Припустімо, є велике зображення, з логотипом Firefox, з розмірами 2982x2808. Треба розкласти його чотирма плитками всередині елемента 300x300 пікселів. | ||
| Щоб це зробити, можна застосувати `background-size` з фіксованим значенням – 150 пікселів. | ||
|
|
||
| #### HTML | ||
|
|
||
| ```html | ||
| <div class="tiledBackground"></div> | ||
| ``` | ||
|
|
||
| #### CSS | ||
|
|
||
| ```css | ||
| .tiledBackground { | ||
| background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); | ||
| background-size: 150px; | ||
| width: 300px; | ||
| height: 300px; | ||
| border: 2px solid; | ||
| color: pink; | ||
| } | ||
| ``` | ||
|
|
||
| #### Result | ||
|
|
||
| {{EmbedLiveSample("cherepytsia-z-velykym-zobrazhenniam", 340, 340)}} | ||
|
|
||
| Більше прикладів у [Зміні розміру зображень тла](/uk/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images). | ||
|
|
||
| ## Специфікації | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Сумісність із браузерами | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - [Зміна розміру зображень тла](/uk/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) | ||
| - [Масштабування тла SVG](/uk/docs/Web/CSS/Scaling_of_SVG_backgrounds) | ||
| - {{cssxref("object-fit")}} |