Rip css background images or

Результат использования различных значений object-fit

Следующие примеры кода демонстрируют эффекты от использования различных значений .

Использование object-fit: contain для размещения изображений с полями (леттербоксинг):

Изображения с измененными пропорциями обычно ужасно выглядят, поэтому вместо этого вы можете добавить к изображению поля, с помощью параметра :  ():

img {
  width: 480px;
  height: 320px;
  background: black;
}
 
.contain {
	object-fit: contain;
}

Кадрирование изображений с помощью object-fit:cover

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

.cover {
  object-fit: cover;
}

Изменение соотношения сторон видео с помощью object-fit: fill

С другой стороны, мы также можем взять видео и насильно изменить его соотношение сторон. Возможно, в некоторых видео, присланных вашим редактором контента, задано неправильное соотношение сторон, и вы хотите исправить его на лету, одним движением руки?

Возьмите этот кадр:

Если мы вставим его на страницу, используя этот код:

То выглядеть он будет ужасно: у видео появятся поля, потому что элемент 

.fill {
  object-fit: fill;
}

Это изменит оригинальное соотношение сторон и заставит кадр полностью заполнить элемент

Интересные эффекты с использованием transition

Комбинирование  и  с CSS transition может добавить галерее изображений или видео несколько довольно интересных эффектов. Например:

.none {
  width: 200px;
  height: 200px;
 
  overflow: hidden;
  object-fit: none;
  object-position: 25% 50%;
  transition: 1s width, 1s height;
}
 
.none:hover, .none:focus {
	height: 350px;
	width: 350px;
}

Сначала отображается лишь небольшая часть изображения, а при выборе/наведении курсора на элемент он увеличивается, демонстрируя изображение целиком ().

Это происходит благодаря установке свойства :  у элемента 

The object-fit Property

This property determines how replaced content like images and videos occupy the space inside their content box. It has five possible values:

The syntax to use this property is shown below:

When set to , the image is sized to fit completely inside the content box. The height of image in this case is equal to the height of the box itself. This is also the initial value of the property.

See the Pen Object Fit: Fill by SitePoint (@SitePoint) on CodePen.

The value resizes the image in such a way that the image fits within its content box while still retaining its aspect ratio. This serves two purposes. It avoids image distortion and at the same time keeps the image inside the content box. If the image does not completely cover the content box, the background color that you might have set fills up the remaining space.

See the Pen Object Fit: Contain by SitePoint (@SitePoint) on CodePen.

The value can be useful in situations where you don’t know the dimensions of the image but still want it to fit inside a container of known width.

If you want the image to fill the space inside its content box entirely and still keep its intrinsic aspect ratio, you should use the property. In this case, the image is scaled in such a way that the smaller side of the image fits the containing box perfectly. Any part of the image that overflows the box is then cropped.

See the Pen Object Fit: Cover by SitePoint (@SitePoint) on CodePen.

To show the image with its intrinsic dimensions and ignore any height or width value set on the containing box, you can use . The image is not resized in this case. However, if any part of the image lies outside its containing box, then it will be cropped.

See the Pen Object Fit: None by SitePoint (@SitePoint) on CodePen.

Our final value is . As the name suggests, it scales down the image. This means it will be resized as if it has been set to or based on which value results in a smaller image. In other words, if none of the dimensions of our image are greater than the respective dimensions of its containing box, the value is applied.

See the Pen Object Fit: scale-down by SitePoint (@SitePoint) on CodePen.

CSS Functions

CSS functions are used as a value for various CSS properties.

Function Description
attr() Returns the value of an attribute of the selected element
calc() Allows you to perform calculations to determine CSS property values
cubic-bezier() Defines a Cubic Bezier curve
hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)
linear-gradient() Sets a linear gradient as the background image. Define at least two
colors (top to bottom)
radial-gradient() Sets a radial gradient as the background image. Define at least two
colors (center to edges)
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient
rgb() Defines colors using the Red-Green-Blue model (RGB)
rgba() Defines colors using the Red-Green-Blue-Alpha model (RGBA)
var() Inserts the value of a custom property

The object-position Property

As we saw earlier, the property fills up all space inside the containing box while still preserving the intrinsic aspect ratio of images. The images are also placed centrally by default. In situations where the focus point is at the center, this will serve you well. But, what if the focus point of images is not at the center?

The property can help you here. It works just like . The code snippet below sets the position of the image to the top left:

Instead of specifying the dimensions in pixels, you can use percentages. For instance, is top-left and is bottom-right. This can be helpful when you don’t know the image dimensions.

When the aspect ratios of your image and its containing box are similar, setting won’t seem to make much difference. However, the results improve when the aspect ratios are off by a noticeable factor. The CodePen demo below illustrates my point.

See the Pen GZewMJ by SitePoint (@SitePoint) on CodePen.

Setting position to top-left in the second case brings the sun back into focus.

One more thing worth mentioning about the property is that it is animatable and can produce stunning effects if used properly. Consider the code below:

With this code, I am animating the position of the image using keyframe animations and, as you can see, the final result looks great.

See the Pen Animating the object-position Property by SitePoint (@SitePoint) on CodePen.

This could probably also be used in videos when focus moves from one person to another.

Свойство 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 Наследует значение свойства от родительского элемента.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Usage

Initialization:

style>
  .container {
    width: 25em; /* Or whatever you want it to be */
    height: 25em; /* Or whatever you want it to be */
  }
  .media {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Or whatever object-fit you want */
  }
style>


div class="container">
  img
    alt=""
    src="https://unsplash.it/800/600/"
    class="media"
    data-object-fit="cover"
  />
div>

script src="dist/objectFitPolyfill.min.js">script>

Customized object-fit/object-position:

div class="container">
  img
    alt=""
    src="https://unsplash.it/800/600/"
    class="media"
    data-object-fit="contain"
    data-object-position="top left"
  />
div>

div class="container">
  img
    alt=""
    src="https://unsplash.it/800/600/"
    class="media"
    data-object-fit="none"
    data-object-position="25% 75%"
  />
div>

div class="container">
  img
    alt=""
    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:

div class="container">
  img
    alt=""
    src="https://unsplash.it/800/600/"
    class="media"
    data-object-fit
  />
div>

script src="dist/objectFitPolyfill.basic.min.js">script>

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Property Values

Value Description Try it
fill 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
Try it »
contain The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box Try it »
cover 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 Try it »
none The replaced content is not resized Try it »
scale-down The content is sized as if none or contain were specified (would result in a smaller concrete object size) Try it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

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;}

object-fit[Bearbeiten]

Die object-fit Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements wie img oder video an die Box angepasst werden, die durch dessen verwendete Höhe und Breite erzeugt wird.

Folgende Werte sind möglich:

  • : (Standardwert) wird in der Größe angepasst, sodass die Inhaltsbox des Elements ausgefüllt wird, kann dabei im Seitenverhältnis verzerrt werden
  • : wird angepasst, ohne dass die Seitenverhältnisse des Elements verändert werden
  • : wird so in der Größe angepasst, dass es seine Inhaltsbox vollständig ausfüllt, ohne dabei sein Seitenverhältnis zu verlieren. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten.
  • : keine Anpassung
  • : wird in der Größe geändert als ob oder angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.

object-fit
ansehen …

main {
  display grid;
  grid-gap 1rem;
  grid-template-columns repeat(auto-fill, minmax(20em, 1fr));
}

section > img {
  width 20em;
  height 15em;
  border 1px solid #000;
}

.fill {
  object-fit fill;
}

.contain {
  object-fit contain;
}

.cover {
  object-fit cover;
}

.none {
  object-fit none;
}

.scale-down {
  object-fit scale-down;
}

Перейдём к следующему из моих любимых свойств: object-position.

Воспользуемся уже знакомым изображением и этими стилями:

img {  
  background: yellow;
  height: 180px;
  object-fit: none;
}

Здесь стоит отметить пару вещей: для правильной работы нужно объявить размеры для изображения, а чтобы изображение не заполняло весь бокс (как это происходит по умолчанию), а его можно было сдвинуть, нужно установить ему . Это может показаться странным, но всё дело в том, что по умолчанию для изображения устанавливается , даже если не объявлять его специально.

Что касается поведения по умолчанию, без значения центрирует все объекты по горизонтали и вертикали:

img {
  background: yellow;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%; /* Даже если это не объявлять, изображение всё равно отцентрируется. */
}

Первое значение смещает изображение влево или вправо, а второе — вверх или вниз. Здесь можно поэкспериментировать с этими значениями:

Мы можем даже «протолкнуть» изображение внутрь его области контента, так что можно будет увидеть , который мы задали раньше

Но насколько это полезно? Хороший вопрос! Вот в недавнем проекте мне потребовалось сдвинуть к центру конкретный участок изображения, и тем самым привлечь внимание читателя. Загрузка нового изображения не требуется, поэтому в этом случае не понадобится элемент , всё, что мы хотели — немного сдвинуть изображение

Помимо смещения фокуса на нужную часть изображения, не очень представляю, для чего еще это может быть полезно на практике. Но я повозился с , чтобы продемонстрировать, как можно скрыть части изображения, а затем по клику показывать его по кусочкам, как в этом демо:

Я не эспериментировал, как и для чего можно использовать это для элементов . Может быть, видео на весь экран, заполняющее его без черных полос по краям? Чтобы полностью раскрыть потенциал этих свойств, изучить предстоит ещё очень много.

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 MarginsCSS 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 FontsCSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS FloatCSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation BarCSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Why Use object-fit and object-position?

You might be wondering why use these two properties at all when you can use and . Actually, there are at least two good reasons.

First, consider a scenario where you have an image that is supposed to be part of an article. If the image dimensions are set in CSS just like the case described in the introduction, resizing the browser window will mess up its aspect ratio. In such a case, you will be tempted to use a with and properties because simply using an tag won’t be sufficient.

The problem with this solution is that you should always try to keep your content and presentation separate. The background properties are meant to be used for presentation purpose. When your images are actually part of the content, it makes more sense to use and along with the tag to achieve the same result.

The other reason is that the background properties cannot be applied to videos whereas and can. Therefore, when displaying videos, and are your only options.

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings
of a specified element.

Sibling elements must have the same parent element, and «adjacent» means
«immediately following».

The following example selects all

elements that are placed immediately after

elements:

Example

div + p {  background-color: yellow;}

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all

elements that are siblings of

elements: 

Example

div ~ p {  background-color: yellow;}

All CSS Combinator Selectors

Selector Example Example description
element element div p Selects all

elements inside

elements

element>element div > p Selects all

elements where the parent is a

element

element+element div + p Selects all

elements that are placed immediately after

elements

element1~element2 p ~ ul Selects every

  • element that are preceded by a

element

❮ Previous
Next ❯

HOW TO

TabsDropdownsAccordionsSide NavigationTop NavigationModal BoxesProgress BarsParallaxLogin FormHTML IncludesGoogle MapsRange SlidersTooltipsSlideshowFilter ListSort List

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

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

Для начала, подробнее про object-fit

Это свойство определяет, как элемент вроде подстраивается под доступные ширину и высоту своего содержимого. С можно приказать содержимому заполнить этот бокс различными способами, например, «сохранить эти пропорции!» или «растянуться и занять как можно больше места!»

Вот пример:

Это изображение 400х260px. Если добавить к нему…

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

… то в итоге получим неуклюжее искажение, поскольку изображение сплющивается, чтобы уместиться в эти рамки:

Содержание в нашем займёт всё доступное пространство в своём новом боксе, созданном при изменении его высоты и ширины, «ломая» тем самым его исходные пропорции.

Чтобы и сохранить пропорции изображения и заполнить всю доступную область, воспользуемся :

.cover {
  object-fit: cover;
}

Слева исходное изображение, а справа — изображение обрезанное по бокам, которое теперь сохраняет наши пропорции! Может в таком масштабе это и не выглядит впечатляющим, но как только мы столкнёмся с разработкой более реалистичных интерфейсов, вот тогда-то и проявит себя во всей красе.

Возьмём другой пример:

Здесь у нас два изображения, которые должны занимать 50% ширины окна браузера (чтобы они стояли бок о бок) и 100% высоты. Для этого воспользуемся единицами области просмотра.

img {
  height: 100vh;
  width: 50vw;
}

Проблема всплывает, когда при изменении размера экрана меняются и пропорции изображения, что приводит к всевозможным странностям. А нам бы хотелось сохранить их пропорции, как и в предыдущем демо, так что для этого можно использовать тот же метод. , выручай!

Попробуйте снова изменить размер экрана. Странности с пропорциями исчезли, так ведь? Это также весьма полезно для изображений с различными размерами, поскольку они фактически будут обрезаны по границам бокса.

— лишь одно из многих значений для , о которых более подробно можно почитать в справочнике, но пока что это единственное значение, которое кажется мне наиболее полезным для повседневной разработки интерфейсов.

Ссылка на основную публикацию