Fit content css: Использование значения свойства CSS ширины по размеру содержимого
Использование значения свойства CSS ширины по размеру содержимого
Хотя некоторые новые свойства и значения свойств, такие как object-fit (подходить для объекта), max-content (по максимальному размеру содержимого), min-content (по минимальному размеру содержимого) и fit-content (по ширине содержимого) еще считаются экспериментальными, они уже хорошо поддерживаются браузерами, иногда нуждаясь в добавлении приставок производителей.
Родственное значениям свойств максимального и минимального размерам содержимого, значение свойства по размеру содержимого может быть очень полезным, особенно при создании адаптивного дизайна.
Легкий способ получения компактного размера
Значение по размеру содержимого отлично подходит для расположения групп содержимого неизвестной ширины, таких как горизонтальное меню сайта:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>С помощью следующего кода CSS:
nav { background: #555; }
nav a {
display: inline-block;
padding: 1rem;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}По умолчанию, горизонтальное меню будет выглядеть примерно так:
А если нам нужно, чтобы меню не занимало всю ширину своего родительского элемента, а было своей минимальной ширины без переноса слов в ссылках на новую строку, можно применить значения свойства по размеру содержимого:
nav { background: #555; width: fit-content; }Что создаст такой внешний вид:
Теперь можно разместить меню по центру, несмотря на то, что его точная ширина нигде не задана:
nav { background: #555; width: fit-content; }В результате получим следующее:
Это также сработает для изображений и других подобных элементов:
figure {
border: 2px solid #222;
width: fit-content;
background: #555;
font-size: 0;
}
figure img {
width: 200px;
}После задания двух изображений в элементе фигуры получим вот это:
Обратите внимание на то, что нужно задать ширину изображений, чтобы в такой ситуации сработало значение свойства по размеру содержимого.
Будьте осторожны с использованием процентов, так как если общая ширина не будет равна 100%, останется незанятое место:
figure {
border: 1px solid red;
display: table;
width: fit-content;
background: #555;
font-size: 0;
}
figure img {
width: 33%;
}Результат будет следующим:
Очевидно, что содержащий блок в этом случае занимает все 100% размера родительского блока.
Приставки производителя и обходные варианты
Значению свойства по размеру содержимого до недавнего времени были нужны приставки производителей, расположенные прямо перед ним, для всех браузеров, а в новых версиях браузеров приставка -webkit уже нужна только для мобильных версий некоторых браузеров, но приставка -moz все еще нужна всем версиям браузера Firefox. Так что рекомендуем следующую запись этого значения свойства:
width: -moz-fit-content; width: -webkit-fit-content; width: fit-content
Значение свойства по размеру содержимого не поддерживается во всех версиях браузеров Internet Explorer, Edge и Opera Mini, но в качестве обходного варианта хорошо подойдут другие свойства отображения, такие как строчно-блочное отображение и отображение в виде таблицы, которые действуют схожим образом.
Одним из недостатков использования строчно-блочного отображения является столкновение с известной проблемой с пробелами, но и с этим можно разобраться. Для полной поддержи браузерами лучше использовать оба пути:
element {
width: fit-content;
display: table;
}Использованы фотографии Denis Collette, лицензированные по лицензии
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
object-fit — Веб-технологии для разработчиков
Свойство object-fit определяет, как содержимое заменяемого элемента, такого как <img> или <video>, должно заполнять контейнер относительно его высоты и ширины.
Синтаксис
Для object-fit можно указать одно из нижеперечисленных свойств.
Значения
fill- Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.
contain- Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как «помещенный внутрь» блока, ограничиваясь его шириной и высотой.
cover- Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как «покрытие» блока, ограничиваясь его шириной и высотой.
none- Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.
scale-down- Контент изменяет размер, сравнивая разницу между
noneиcontain,для того, чтобы найти наименьший конкретный размер объекта.
Правильный синтаксис
fill | contain | cover | none | scale-down
Пример
HTML Контент
<div> <h3>object-fit: fill</h3> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <h3>object-fit: contain</h3> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <h3>object-fit: cover</h3> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <h3>object-fit: none</h3> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <h3>object-fit: scale-down</h3> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> </div>
CSS Контент
h3 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Результат
Технические параметры
Браузерная совместимость
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
object-fit | Chrome | Edge Полная поддержка 16
| Firefox Полная поддержка 36 | IE Нет поддержки Нет | Opera
| Safari Полная поддержка 10 | WebView Android Полная поддержка 4.4.3 | Chrome Android | Firefox Android Полная поддержка 36 | Opera Android Полная поддержка 19
| Safari iOS Полная поддержка 10 | Samsung Internet Android Полная поддержка 2.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Требует вендорный префикс или другое имя для использования.
- Требует вендорный префикс или другое имя для использования.
Смотри также
Горизонтальная центровка с использованием CSS значения fit-content
Перевод статьи: Horisontal centering using CSS fit-content value.
Автор: Catalin Rosu.
Однажды я прочел отличную статью о горизонтальном выравнивании, написанную Роджером Йоханссоном (Roger Johansson), в которой он детально рассматривает так называемый shrinkwrap эффект, то есть ужатие ширины элемента по его контенту. В сущности, его пост посвящен одной из самых распространенных проблем, с которыми вы зачастую сталкиваетесь на практике, а точнее проблемой центровки навигационного меню, содержащего плавающие элементы, ширина которых не задана явно.
Мы все прекрасно знаем, насколько хлопотным занятием может быть процесс центровки в подобного рода ситуациях. Отталкиваясь от этого широко распространенного примера, Роджер создал внушительный список методов, которые вы можете использовать для решения проблемы горизонтального центрирования элементов.
Просто еще один возможный способ.
Недавно я обнаружил, что оба браузера Firefox и Chrome поддерживают внутренние (intrinsic) значения ширины и что одним из наиболее привлекательных значений свойства width является fit-content. К тому же, в этой статье я покажу вам, насколько эффективным может оказаться именно это значение (fit-content) в поиске решения упомянутой выше проблемы.
Вполне очевидно, что также как в случае с таблицами, когда для выравнивания по горизонтали вам необходимо установить значения левого и правого полей равным auto, использование декларации width: fit-content сообщает браузеру, что ширина форматируемого таким образом элемента определяется его контентом, а не автоматически занимает все доступное пространство, предоставляемое содержащим блоком.
Подходящий пример.
И теперь, используя предложенный Роджером Йоханссоном пример разметки:
<div>
<ul>
<li><a href=»/»>Home</a></li>
<li><a href=»/»>About us</a></li>
<li><a href=»/»>Our products</a></li>
<li><a href=»/»>Customer support</a></li>
<li><a href=»/»>Contact</a></li>
</ul>
</div>
и следующий фрагмент CSS кода:
.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
… вы получаете еще один новый способ решения проблемы горизонтального центрирования навигационного меню, содержащего плавающие элементы. Достаточно просто, не так ли? Для того, чтобы увидеть все стили, откройте исходный код демонстрационной страницы.
Минимальная поддержка браузеров, но многообещающее будущее.
Несмотря на достаточно слабую поддержку браузерами (*), на этот подход все же стоит обратить внимание и рассмотреть как альтернативный вариант для использования в будущем. Взять, к примеру, модуль CSS Flexbox, изначально его поддержка тоже была минимальной, но сейчас она стремительно расширяется.
Так же имейте в виду, что значение fit-content не является окончательной рекомендацией к использованию, а относится к категории экспериментальных. Это свойство описано в редакционной версии W3C стандарта, а значит, в будущем спецификация может измениться.
Post Views: 776
Свойства object-fit и object-position. Масштабируем пропорционально.
1. Свойство object-fit
Свойство object-fit определяет, каким образом содержимое замещаемых элементов будет подогнано к краям контейнера тега в случае, когда для элемента заданы ширина и высота, отличные от его собственных размеров.
Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы <img> <input type="image">, <embed>, <iframe>, <video>, <canvas> и <object> в случае когда они содержат встраиваемое содержимое, а также элемент <audio>, использующий пользовательские элементы управления.
Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).
Поддержка браузерами
IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка
Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0
| object-fit | |
|---|---|
| fill | Значение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину. |
| contain | Содержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера. |
| cover | Содержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера. |
| scale-down | Содержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры. |
| none | Замещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
See the Pen BQGdYy by Elena (@html5book) on CodePen.
2. Свойство object-position
Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Не наследуется.
| object-position | |
|---|---|
| Значения: | |
| left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom | Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center. |
| px / em/ % | Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента. Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в px, em и %. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
See the Pen vyQWme by Elena (@html5book) on CodePen.
height | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fit-content | Chrome Полная поддержка 46 | Edge Полная поддержка 79 | Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera Полная поддержка 33 | Safari Полная поддержка 11
| WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Нет поддержки Нет | Opera Android Полная поддержка 33 | Safari iOS Полная поддержка 11
| Samsung Internet Android Полная поддержка 5.0 |
max-content | Chrome Полная поддержка 46 | Edge Полная поддержка 79 | Firefox Полная поддержка 66
| IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Полная поддержка 11 | WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 66
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 11 | Samsung Internet Android Полная поддержка 5.0 |
min-content | Chrome Полная поддержка 46 | Edge Полная поддержка 79 | Firefox Полная поддержка 66
| IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Полная поддержка 11 | WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 66
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 11 | Samsung Internet Android Полная поддержка 5.0 |
stretch | Chrome Полная поддержка 28Альтернативное имя
| Edge Полная поддержка 79Альтернативное имя
| Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera Полная поддержка 15Альтернативное имя
| Safari Полная поддержка 9Альтернативное имя
| WebView Android Полная поддержка 4.4Альтернативное имя
| Chrome Android Полная поддержка 28Альтернативное имя
| Firefox Android Нет поддержки Нет | Opera Android Полная поддержка 15Альтернативное имя
| Safari iOS Полная поддержка 9Альтернативное имя
| Samsung Internet Android Полная поддержка 5.0Альтернативное имя
|
Маленький, большой: используя CSS-значения fit-content
От автора: Предыдущие статьях рассказал о новых поддерживаемых (и не только) значениях CSS, например, object-fit, max-content и min- содержание. И хотя данные значения до сих пор официально являются «экспериментальными», они имеют отличную браузерную поддержку (при наличии соответствующих вендорных префиксов).
Находясь где-то между max-content и min-content, значение fit-content может быть очень полезным, особенно при созданиичивых дизайнов.
«Безболезненное» сжатие контейнера
Значение min-content отлично подходит для выравнивания блоков контентом с неизвестной шириной, например, навигационного меню на сайте:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИспользуем следующий CSS:
nav {фон: # 555; } nav {дисплей: встроенный блок; набивка: 1 бэр; текст-преобразование: прописные; цвет: #fff; текстовое оформление: нет; }
nav {background: # 555; } nav a {display: inline-block; набивка: 1 бэр; текст-преобразование: прописные; цвет: #fff; текстовое оформление: нет; } |
По умолчанию, панель навигации будет выглядеть примерно так:
Что если бы мы захотели сделать так, чтобы меню не занимало всю ширину родительского элемента, а, наоборот, сжималось до минимально возможной ширины, без переноса любой из ссылок на новую строку? Добиться этого нам поможет значение fit-content:
nav {фон: # 555; ширина: подходящее содержание; }
.Использование значений CSS ширины по размеру содержимого
Хотя некоторые новые свойства и значения свойств, такие как соответствие объекта (подходить для объекта), max-content (по максимальному размеру содержимого), min-content (по минимальному размеру содержимого) и fit-content (по ширине содержимого) еще считается экспериментальными, они уже хорошо поддерживаются браузерами, иногда нуждаясь в добавлении приставок производителей.
Родственное значение размера и минимального размера содержимого, значение свойства по размеру содержимого может быть очень полезным, особенно при создании адаптивного дизайна.
Легкий способ получения компактного размера
Значение по размеру содержимого отлично подходит для расположения групп содержимого неизвестной ширины, таких как горизонтальное меню сайта:
С помощью следующего кода CSS:
nav {фон: # 555; }
nav a {
дисплей: встроенный блок;
набивка: 1 бэр;
текст-преобразование: прописные;
цвет: #fff;
текстовое оформление: нет;
} По умолчанию, горизонтальное меню будет выглядеть примерно так:
, чтобы меню не занимало всю ширину своего родительского элемента, а было минимальной ширины без переноса слов в ссылках на новую строку, применить значения по размеру содержимого:
nav {фон: # 555; ширина: подходящее содержание; } Что создаст такой внешний вид:
Теперь можно link меню по центру, несмотря на то, что его точная ширина нигде не задана:
nav {фон: # 555; ширина: подходящее содержание; } В результате получим следующее:
Это также сработает для изображений и других элементов:
figure {
граница: 2px solid # 222;
ширина: подходящее содержание;
фон: # 555;
размер шрифта: 0;
}
figure img {
ширина: 200 пикселей;
} После задания двух изображений в элементе фигуры получим вот это:
Обратите внимание на то, что нужно задать размерну изображений, чтобы в такой ситуации сработало значение свойства по размеру содержимого.
Будьте осторожны с использованием процента как общая ширина не будет равна 100%, останется незанятое место:
figure {
граница: сплошной красный 1px;
дисплей: таблица;
ширина: подходящее содержание;
фон: # 555;
размер шрифта: 0;
}
figure img {
ширина: 33%;
} Результат будет следующим:
, что нарушает блок в этом случае занимает все 100% размера родительского блока.
Приставки производителя и обходные варианты
Значения по размеру до недавнего времени были нужны производители, расположенные прямо перед ним, для всех браузеров, в новых версиях браузеров приставка -webkit уже нужна только для мобильных версий некоторых браузеров, но приставка -moz все еще нужна всем версиям браузеров Fire Fox.Так что рекомендуемая запись этого значения свойства:
ширина: -moz-fit-content; ширина: -webkit-fit-content; ширина: fit-content
Значение по размеру пакета не поставляется во всех версиях браузеров Internet Explorer, Edge и Opera Mini, но в качестве альтернативного варианта подойдут другие свойства отображения, такие как строчно-блочное отображение и отображение в виде таблицы, которое имеет схожим образом.
Одним из недостатков использования строчно-блочного изображения является столкновение с известной проблемой с пробелами, но и с этим можно разобраться.Для полной поддержи браузерами лучше использовать оба пути:
element {
ширина: подходящее содержание;
дисплей: таблица;
} Использованы фотографии Денис Коллетт , лицензированные по лицензии Attribution-NonCommercial-NoDerivatives 4.0 International Creative Commons .
Автор урока Дадли Стори
Перевод — Дежурка
Смотрите также:
.Горизонтальная центровка с использованием CSS значения fit-content
Перевод статьи: Горизонтальное центрирование с использованием значения CSS fit-content.
Автор: Каталин Рошу.
Однажды я прочел отличную статью о горизонтальном выравнивании, написанную Роджером Йоханссоном (Роджер Йоханссон), в которой он детально рассматривает так называемый эффект shrinkwrap , то есть ужатие ширины элемента по его контенту. В сущности, как правило, используется одна из самых распространенных проблем.
Мы все прекрасно знаем, насколько хлопотным занятием может быть процесс центровки в подобного рода ситуациях. Отталкиваясь от этого широко распространенного примера, Роджер создал внушительный список методов, которые вы можете использовать для решения проблемы горизонтального центрирования элементов.
Просто еще один возможный способ.
Недавно я обнаружил, что оба браузера Firefox и Chrome внутренние (внутренние) значения ширины и что одним из наиболее привлекательных значений свойства width является fit-content.К тому же, в этой статье я покажу вам, каким эффективным может оказаться это значение (пригодное содержание) в поиске решения упомянутой выше проблемы.
Вполне очевидно, что также как в случае с таблицами, когда для выравнивания по горизонтали необходимо установить значения левого и правого полей равным автоматически, использование декларации width: fit-content сообщает браузеру, что ширина форматируемого изображения элемента определяет его контентом, а не автоматически занимает все доступное пространство, предоставляемое блоком.
Подходящий пример.
И теперь, используя предложенный Роджером Йоханссоном пример разметки:
и следующий фрагмент CSS кода:
.центральный ul {
width: -moz-fit-content;
ширина: -webkit-fit-content;
ширина: fit-content;
маржа: авто;
}
… вы получаете еще один новый способ решения горизонтального центрирования навигационного меню, содержащего плавающие элементы. Достаточно просто, не так ли? Для того, чтобы увидеть все стили, откройте исходный код демонстрационной страницы.
Минимальная поддержка браузеров, но многообещающее будущее.
Несмотря на достаточно слабую поддержку браузерами (*), на этот подход все же стоит обратить внимание и рассмотреть как альтернативный вариант использования в будущем.Взять, к примеру, модуль CSS Flexbox , изначально его поддержка тоже была стремительно расширяется, но сейчас она стремительно расширяется.
Так же имейте в виду, что значение fit-content не является окончательной рекомендацией к использованию, а относится к категории экспериментальных. Это свойство описано в редакционной версии стандарта W3C, а значит, в будущем спецификация может измениться.
просмотров поста: 777
.