Width

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

浏览器兼容性

Update compatibility data on GitHub

The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

The CSS object-fit Property

The CSS property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as «preserve that aspect ratio» or «stretch up and take up as much space as possible».

Look at the following image from Paris, which is 400×300 pixels:

However, if we style the image above to be 200×400 pixels, it will look like this:

img {  width: 200px;  height: 400px;}

We see that the image is being squeezed to fit the container of 200×400 pixels, and its original aspect ratio is destroyed.

If we use it will cut off the sides of the image, preserving the aspect ratio, and also filling in the space, like this:

示例

p.goldie {
  background: gold;
}

<p class="goldie">The Mozilla community produces a lot of great software.</p>

像素 px 和字高 em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">以 px 度量的宽度</div>
<div class="em_length">以 em 度量的宽度</div>

百分比

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">按照百分比度量的宽度</div>

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit 使用了非标准的名称 */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

<p class="minblue">The Mozilla community produces a lot of great software.</p>

浏览器兼容性

Update compatibility data on GitHub

Примеры

p.goldie {
  background: gold;
}

<p class="goldie">Сообщество Mozilla производит множество отличного ПО.</p>

Пиксели и em

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

<div class="px_length">Ширина в пикселях</div>
<div class="em_length">Ширина в em</div>

Проценты

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

<div class="percent">Ширина в процентах</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit используют нестандартное имя */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

<p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}

<p class="minblue">Сообщество Mozilla производит множество отличного ПО.</p>

规范

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

All Values of The CSS object-fit Property

The property can have the following values:

• — This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
• — The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
• — The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
• — The replaced content is not resized
• — The content is sized as if none or contain were specified (would result in a smaller concrete object size)

The following example demonstrates all the possible values of the property:

Example

.fill {object-fit: fill;} .contain {object-fit: contain;} .cover {object-fit: cover;} .scale-down {object-fit: scale-down;} .none {object-fit: none;}

Спецификации

Usage

Initialization:

<style>.container{width25em;height25em;}.media{width100%;height100%;object-fitcover;}</style><divclass="container"><imgalt=""src="https://unsplash.it/800/600/"class="media"data-object-fit="cover" /></div><scriptsrc="dist/objectFitPolyfill.min.js"><script>

Customized object-fit/object-position:

<divclass="container"><imgalt=""src="https://unsplash.it/800/600/"class="media"data-object-fit="contain"data-object-position="top left" /></div><divclass="container"><imgalt=""src="https://unsplash.it/800/600/"class="media"data-object-fit="none"data-object-position="25% 75%" /></div><divclass="container"><imgalt=""src="https://unsplash.it/800/600/"class="media"data-object-fit="scale-down"data-object-position="3em -1em" /></div>

If you’re only interested in using the basic polyfill (which assumes and ), you can save yourself some bytes by using:

<divclass="container"><imgalt=""src="https://unsplash.it/800/600/"class="media"data-object-fit /></div><scriptsrc="dist/objectFitPolyfill.basic.min.js"><script>

Синтаксис

/* <length> значения */
min-height: 3.5em;

/* <percentage> значения */
min-height: 10%;

/* Значения-ключевые слова */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* Глобальные значения */
min-height: inherit;
min-height: initial;
min-height: unset;

Значения

Минимальная высота выражается как от высоты родительского блока. Отрицательные значения делают свойство недействительным.

Значения-ключевые слова

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

Внутренняя предпочтительная высота.

Внутренняя минимальная высота.

Высота родительского блока минус вертикальные , , и

(Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., .)

Согласно CSS3 Box, это синоним . CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.

The Webstandard

Normally, the image would be stretched to the specified dimensions but due to the usage of the CSS property the image now is scaled proportionally, until every pixel of the defined area is covered by parts of it. In the case of cover this means that parts of the image will overlap the given area.

The following are the possible values and their implications:

• streches the image exactly to the defined dimensions which results in a distorted image. Comparable to . That’s the default value.
• leaves the image at its natural size and centers it inside within the defined area. If the image’s natural dimensions are larger than the defined area parts of the image will poke out of it unless you also set on it. Comparable to .
• scales the image up or down until all of it fits into the defined area. This mode respects the image’s natural aspect-ratio. It’s also called «letterbox view». Comparable to .
• scales the image up or down until every pixel of the defined area is covered with parts of the image. Sort of «pan and scan view». This means that parts of the image will poke out of the defined area unless you also set on it. This mode respects the image’s natural aspect-ratio. Comparable to .

Примечание

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

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

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

Ключевые слова (в отличии от значений с единицами измерений и процентами) не зависят от свойства border-box, они всегда устанавливают размер области содержимого.

Отрицательные значения ширины не допустимы.

Property Values

浏览器兼容性

We’re converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven’t yet converted the data it contains.

• Desktop
• Mobile

CSS 2.1 explicitly leaves the behavior of with undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn’t rely on a specific one now.

Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines and not . Also the definition of is simpler than in CSS3 Sizing.

WebKit implements an earlier proposal for setting the height to an intrinsic height: the keywords , instead of , and , instead of There is no equivalent for or .

С этим читают

• Background-size
• :first-child
• Background-color
• Начинаем работать с css функцией calc()
• Rowspans & colspans in css tables
• Единицы измерения vh, vw, vmin, vmax
• Стилизация select
• Parentnode
• Дрессируем box-shadow
• Css 3d transforms