Detailed CSS3 Object-position/object-fit attribute instance

Object-position and Object-fit

To understand this object in the attribute name, we have to start with an official explanation.

The Object-fit CSS property specifies how the contents of a replaced element should is fitted to the box established by it s used height and width.

The Object-position property determines the alignment's replaced element inside its box.

Brother, you are teasing me! Although I can not insight into the heart of English, but I still recognize the appearance of the English Ah! The above two paragraphs officially explain that, in addition to the property itself, there is no object in the word, how to explain what object?

The object here actually refers to the replaced element (the alternative) (the MDN).

Replace element

Not all elements are called "replacement elements." In CSS, "replacement element" refers to (references from here):

Elements that are not controlled by the CSS visual format model (see here in Chinese), such as image, embedded document (IFRAME, etc.), or applets. For example, the content of an IMG element is usually replaced by an image specified by its SRC attribute. Replacement elements usually have their intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap has the inherent width and height specified in absolute units, thus there is also a fixed width-high ratio. On the other hand, other documents may not have intrinsic dimensions, such as a blank HTML document.

The CSS rendering model does not consider rendering of replacement element content. The presentation of these replacement elements is independent of CSS. Object, video, textarea, and input are also replacement elements, audio and canvas are replacement elements in some specific cases.

The object that is inserted using the Content property of the CSS is an anonymous substitution element.

That is to say, the object-position and object-fit of this article are only for the replacement element, that is, the form form Family Control series, the old powerhouse IMG image, the HTML5 video and other elements (as I tested, SVG elements do not seem to support, However, it can appear as a src replacement content.

Why do we need Object-position/object-fit?

The official explanation of the "substitution element" above shows that the replacement element usually has a fixed size, such as a picture, for example, the following picture that looks familiar to you:

Its original size is 256*191 pixels. However, the modern web display environment is changing, responsive layouts (adaptive mobile terminals), half-response layouts (wide-screen fit), and traditional fluid layouts (any width-level adaptation) are common, and as a result, there are obstacles to dealing with these fixed-dimensional elements, such as a 2:1 video, Always have to wait for the proportions to fill the container, however, as the browser width is different, the container's aspect ratio may be less than 2, or it may be greater than 2. You say, you can easily achieve less than 2 times, the video width of 100%, the ratio is greater than 2 when the height of 100%?

Obviously, very troublesome, finally most still use JS to control (such as the international version of the QQ homepage of the video processing-browser width arbitrary stretching). It was in response to such a demand that object-fit and Object-position emerged.

The relationship between Object-fit and Object-position is somewhat similar to that of Background-size and background-position, which have similarities, whether in relation or attribute values, so When we understand Object-fit and object-position, we can more or less map background-size and background-position.

Object-fit understand

CSS3 Background-size appears earlier, you should know some of its support values, in addition to the number, it also supports a few keywords, such as: Cover, contain, and so on.

Object-fit is similar, but there are still some differences, specifically 5 values:

. fill {Object-fit:fill;}

. contain {Object-fit:contain}

. Cover {Object-fit:cover}

. none {Object-fit:none;}

. Scale-down {Object-fit:scale-down}

The specific meaning of each attribute value is as follows (in the vernacular, the official interpretation of which you understand):

Fill: Chinese explanation "fills". The default value. The replacement content is stretched to fill the entire content box without ensuring that the original proportions are maintained.

Contain: Chinese explanation "contains". Maintain the original size ratio. Ensure that the size of the replacement content can be placed inside the container. Therefore, this parameter may leave a blank in the container.

Cover: Chinese explanation "cover". Maintain the original size ratio. Ensure that the replacement content size must be greater than the container size, the width and height have at least one and the container consistent. Therefore, this parameter may make some areas of the replacement, such as pictures, invisible.

None: Chinese meaning "none". Maintain the original size ratio. Keep the original size of the replacement content at the same time.

Scale-down: Chinese explanation "reduce". It's like setting the None or the contain in turn, and finally showing the smaller size.

Let's say we use the original picture:

The size of the container is 160*160, the background color is gray blue, and the test picture is set to 100% high width, the following CSS code:

. box {width:160px; height:160px; Background-color: #beceeb;}

. Box > img {width:100%; height:100%;}

As a result, the performance of each attribute value is shown in the following screenshot:

You can control the feeling, what is content stretching (fill), what is the content of all show (contain), what is the container does not leave white (cover), What is how large (none).

New permanent knot Shin knot clothes, wait, wait a moment!scale-down?

Due to its dynamic characteristics, Scale-down should be specially displayed. The actual replacement content is represented by the attribute value of None and the contain final size.

For example, assuming that our container can be resize stretched and changed its size, the effect is consistent with contain when the container is smaller than the 256*191, i.e. the container is smaller than the actual size of the replacement content (the picture here), because at this point the actual display size of contain is smaller than the none. The following screenshots indicate:

However, when the container is stretched to a size larger than the actual size of the picture, the effect is the same as none because the actual display size of none is smaller than the contain. Screenshot below:

Now that we have a rough idea of the performance of the Object-fit values, do you think it's over? No, it's just the beginning.

Don't you have any doubts about the performance of the pictures?

I clearly set the width of the picture is 100%, why does it seem that the actual effect in addition to (fill), seems to have ignored these statements? The actual size of the picture is smaller or larger, rather than based on the actual size of the container to go?

. Box > img {width:100%; height:100%;}

Do you have any doubts? There is wood!!

If so, congratulations, come to the right place, which shows that you have not yet understood some of the concepts.

IMG is an element, and is a replacement element, this through the above learning should be aware;

A picture, if not SRC, it is still a replacement element, it is still in the browser parsing is correct;

SRC points to a picture that is a replacement, note that this replacement and this IMG replacement element is the shell-and-content relationship, and the two are independent. In the CSS2.1 era, the actual size of the shell (if there is no CSS or HTML settings), is the actual size of the content to follow, so, when the page is loaded, we will see the picture occupies a height from 0 to the actual height of the picture of the process of beating; The replacement content fill stretch adapts to the set size of the IMG replacement element. In short, the shell is always the same size as the content. So, we will mistakenly think that the picture is the image, the only existence, leading to our understanding of object-fit characteristics of the performance of the obstacles.

In the CSS3 era, the Object-fit world, Object-fit control is always the size of the replacement content, note, is the size of the replacement content, not an img replacement element. Or, let's say, the IMG setup:

. Box > img {width:100%; height:100%;}

is actually controlling the IMG element, the size of the shell is 100% full container. The picture in the 5 examples above is actually 100% stretched and the container; the actual picture content is not stretched because it is controlled by Object-fit, Object-fit controls the size of the corresponding replacement content of SRC, or contains, or overwrites.

The reason why Object-fit:contain will be transparent white, is because we do not set the background color of the shell IMG, assuming that we add a red background to the shell IMG, we will understand what I mean:

. Box > img {width:100%; height:100%; Background-color: #cd0000;}

The results of the following screenshot, you will find that the original transparent white is now a red background, explain what? Description the IMG replacement element and the SRC replacement content are two separate bodies. The IMG replacement element is subject to CSS 100% stretch control (so the red background is full of containers), and SRC replacements are also subject to object-fit display control. Everyone to their respective roles, there is nothing to cover, conflict!

You can ruthlessly click here: CSS3 Object-fit Property Value Performance Demo

Do you think understanding Object-fit's behavior is over?

Currently, IE browsers do not support Object-fit:

Object-fit is great, I like it very much, ask very much want, how to do?

There is a github on a polyfill, we are interested to be able to onlookers.

Do you think you know how to deal with compatibility is over? Yes, it's over, let's see object-position.

Object-position understand

Object-position is more simple than object-fit, which is to control the location of the replacement content. The default value is 50% 50%, which is the center effect, so the picture is centered horizontally vertically, regardless of the object-fit value of the previous section. Therefore, the next time you want to achieve the size of the picture is not fixed vertical center effect, you can try Object-fit.

Similar to Background-position, object-position value types are type values. In other words, the relative coordinates of the CSS3 are set by the style support.

For example, the replacement content has been positioned in the lower-right corner of the container:

object-position:100% 100%;

For example, the replacement element is positioned relative to the lower-right corner of the 20px 10px location:

Object-position:right 20px Bottom 10px;

The above performance in Firefox 36 browser in line with expectations, Chrome did not read:

Therefore, it is recommended that you use Calc to position the relative lower right corner:

Object-position:calc (100%-20px) Calc (100%-10px);

At this point, the performance of the Chrome browser was expected:

Similarly, object-position also supports negative values, and features are consistent with background-position.

Because it is more simple, it will not unfold. If you are interested, you can ruthlessly click here: CSS3 object-position use schematic demo

Object-position/object-fit Other applications

CSS is really a strange thing, the purpose of the invention may be to achieve a effect, the result, in order to achieve a effect of some of the characteristics of the plug-in is often used to do other things. For example, float is heavily used for block layouts, and I think Object-position/object-fit has this tendency.

The previous section mentioned horizontal vertical center implementation, a direct line of CSS declaration is done, simple and quick, may be hot later.

There is the following to introduce the IMG sprites implementation.

There are many ways to implement the IMG Sprites:

1. External dimension container Overflow:hidden limit, inside or position or margin positioning. But this method requires 2 layers of labels, trouble.
2. In fact, very early, I have tried to use clip to achieve the IMG sprites effect, can be 1 layers of labels to be done. But, elements must be position:absolute. Trouble.

OK, here to introduce the IMG Sprites implementation not only requires a layer of tags, and there are no other constraints, than the previous method is much simpler. Because from the above many examples can be seen, Object-fit was born to trim the function.

IMG Sprites I only think of the application scene when the picture is a dynamic picture, such as the home page of the slide ads, most of the case of IMG Sprites is no application value, but the chaos. There's no advantage compared to background sprites, at least I don't see it.

Everybody: So you're still talking about wool?

Application scenario Thousands, what happens when this method is made?

Let's take a look at the flip effect of any number below:

The Sprites pictures we use are:

We have the following CSS:

. num {

width:40px; height:40px;

Object-fit:none;

object-position:0 0;

}

. NUM0 {}

. num1 {object-position:0 -40px;}

. num2 {object-position:0 -80px;}

. num3 {object-position:0 -120px;}

. num4 {object-position:0 -160px;}

. num5 {object-position:0 -200px;}

. num6 {object-position:0 -240px;}

. num7 {object-position:0 -280px;}

. num8 {object-position:0 -320px;}

. num9 {object-position:0 -360px;}

So the number 2 corresponds to:

Demo page text box after you modify, the picture number will change, for example, change to 999~

The IMG sprites and background sprites are basically consistent in terms of function and energy consumption. An IMG image, however, is an IMG background image. The former compatibility needs to be improved. So, at present, the advantages are not obvious.