Співвідношення сторін - CSS-хитрощі

Властивість CSS aspect-ratioдозволяє створювати вікна, які підтримують пропорційні розміри, де а heightі widthвікно обчислюються автоматично як співвідношення. Це трохи математика, але ідея полягає в тому, що ви можете розділити одне значення на інше за цією властивістю, і обчислене значення гарантує, що поле залишається в тій пропорції.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioвизначається в специфікації модуля розміру вікна CSS рівня 4, яка наразі знаходиться у робочому проекті. Це означає, що він все ще триває і має шанс змінитися. Але Chrome і Firefox підтримують його за експериментальним прапором, а Safari Technology Preview додає підтримку для нього на початку 2021 року, є сильні сигнали, які aspect-ratioнабирають великих обертів.

Синтаксис

aspect-ratio: auto || ;

Простою англійською мовою: aspect-ratioабо вважається autoза замовчуванням, або приймає a як значення де .

• Початкове значення: auto
• Застосовується до: усіх елементів, крім вбудованих коробок та внутрішніх рубінових або табличних ящиків
• Успадковано: ні
• Відсотки: н / д
• Обчислене значення: вказане ключове слово або пара чисел
• Тип анімації: дискретна

Цінності

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Він працює на заміненому та незаміненому вмісті

Якщо ви думаєте: "Е-е, так, хіба браузер це вже не робить для нас на зображеннях?" відповідь така: абсолютно . Браузери роблять деякі фантастичні розрахунки співвідношення сторін для заміненого вмісту, як зображення. Отже, якщо зображення має, скажімо, ширину 500 пікселів, браузер вдосконалює свої алгоритми розмітки CSS, щоб підтримувати внутрішні або «природні» розміри зображення. aspect-ratioВластивість може бути використано для ефективного перевизначити ці природні розміри.

Але незамінений вміст не має природного співвідношення. Це більша частина речей, з якими ми працюємо, наприклад div. Замість того, щоб намагатися зберегти природні пропорції елемента, aspect-ratioвстановлює бажаний розмір.

Зараз специфікація в даний час зазначає, що старі специфікації CSS, зокрема CSS 2.1, не містять чіткого розмежування між заміненим та незаміненим вмістом. Це означає, що ми могли бачити деякі додаткові особливі випадки, додані до специфікації, щоб допомогти їх пояснити. На даний момент ми бачимо, як браузери розгортають підтримку для встановлення бажаних пропорцій для замінених та незамінених окремо, де деякі браузери з ранньою підтримкою за експериментальним прапором можуть підтримувати лише aspect-ratioнезамінений вміст. Безумовно, варто стежити за підтримкою браузера в міру її розвитку.

Він працює самостійно, не вказуючи widthабоheight

Отже, так, ми можемо просто опустити його на такий елемент:

.element ( aspect-ratio: 16 / 9; )

... і елемент за замовчуванням width: autoвмикається неявно, щоб встановити розміри елемента.

Він змінюється, коли widthабо heightперебувають на одному елементі

Скажімо, у нас є елемент із шириною 300pxта aspect-ratioз 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

За своєю природою він aspect-ratioхоче розрахувати розміри елемента самостійно і робитиме це, виходячи з контексту, де він використовується. Але з цим widthпідкинутим, він повідомляє співвідношення сторін для обчислення поля пропорції елемента, використовуючи 300pxяк ширину. В результаті ми ніби просто написали:

.element ( height: 100px; width: 300px; )

Це має сенс! Пам'ятайте, що коли ні widthабо heightне вказано, браузер припускає, що вони є, autoі переходить звідти. Коли ми надаємо явні значення widthта heightзначення, саме вони звикають.

У деяких ситуаціях це ігнорується

Тут все стає трохи розумним, оскільки бувають випадки, коли aspect-ratioце не враховують або на його обчислення впливають інші властивості. Це включає:

Коли обидва widthі heightоголошені на елементі

Ми щойно побачили, як декларування widthабо heightелемента, і елемента вплине на обчислення aspect-ratio. Але якщо в елементі вже є і, widthі height, вони використовуються замість aspect-ratio. Це вимагає заміщення обох властивостей aspect-ratio; встановлення одного heightабо widthокремо не порушить співвідношення сторін елемента.

Робить сенес, правда? Якщо використання будь-якого widthабо heightпримушує aspect-ratioвикористовувати це значення в обчисленні, то логічно випливає, що використання обох повністю замінить aspect-ratioвзагалі, оскільки обидва значення вже надані та встановлені.

Коли вміст виривається із співвідношення

Простіше кажучи, якщо у вас є елемент зі співвідношенням сторін і вміст настільки довгий, що змушує елемент розширюватися, тоді елемент буде розширюватися. І якщо елемент розширюється, його розміри змінюються і, таким чином, більше не пропорція. Ось чому в специфікації сказано, що властивість встановлює “бажане” співвідношення сторін. Це бажано, але не призначено.

Не подобається, як це працює? Встановлення min-height: 0;елемента дозволить вмісту переповнювати бажане співвідношення сторін, а не розширювати його.

Коли він «програє» min-*і max-*властивостям

Ми просто побачили, як це працює, правда? Коли вміст перевищує розміри коробки, aspect-ratioце фактично зникає, оскільки вікно розширюється разом із вмістом. Ми можемо це замінити min-width: 0.

Це тому, що всі властивості min-*та max-*властивості, як правило, ведуть битву widthі heightза перевагу у війні над розрахунками Box Model. Наприклад:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Але:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Це тому min-width, що або заважає widthопускатися нижче певного значення, або ігнорується, оскільки widthвстановив уже встановлений елемент за мінімальну ширину, якою він повинен бути. Те ж саме стосується min-height, max-widthі max-height.

Сенс у всьому цьому: якщо ми встановимо як a, так min-*і max-*властивість на той самий елемент, що aspect-ratioі вони "переможуть" над widthабо height, тоді вони замінять aspect-ratio. Сказав тобі, це було трохи розумово. ?

Підтримка браузера

IE	Край	Firefox	Chrome	Сафарі	Опера
Ні	Ні	86 1,2,3	90 4	TP 5	Ні

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mobile
Ні	Ні	Ні	Ні	Ні

Більше інформації

Стаття від 1 липня 2020 р

Перший погляд на "співвідношення сторін"

Сара Коуп