How to center and adapt images in css

The mobile terminal basically requires image adaptation processing, such as carousel images, product cover images, etc.; the images posted by users are not of the specified size. So, do friends who are doing mobile development encounter difficulties in adapting to images? Let me tell you, in fact, CSS has an object-fit attribute, which can be very convenient for us to adjust images. This article is the method of adjusting images in CSS compiled by the editor.
So what can be done? It just so happens that css3 has the

object-fit attribute Let’s talk about each attribute value

1.object-fit: cover;

This attribute value is the most commonly used one on the mobile terminal. Look at the example below

<img src="/static/imghwm/default1.png"  data-src="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg"  class="lazy"   alt="">

//css部分
img{
    border: 2px red solid;
	width: 300px;    
	height: 300px;
    object-fit: cover;
}

The cover is to fill the entire content in the center. One side will be completely filled, and the rest will be cropped (the filling here will definitely fill the entire content)

Rendering

Original image size ratio

2.object-fit: fill;

fill is to fill the entire content, but will not exceed the content. When there is After filling one side, if there is still a blank space, it will be pulled up to fill the entire content

Rendering

See the original picture above

3.object-fit: contain;## When

#contain is filled, it will not exceed the content. When one side is filled, the filling ends and the image ratio will not be increased or changed. In this way, when the image is not enough to fill the entire content, there will be one side left blank.

Rendering

See the original picture above

4.object-fit: scale-down;

scalc-down feels the same as contain, but I don’t see anything. Different, if anyone knows, please feel free to communicate.

5.object-fit: none;

none is the default attribute value, no filling will be given

Summary: Compatibility Basically, all mobile browsers are compatible, unless those are older than you. If the above content is not very clear, it can be compared to a picture that is gradually enlarged (filled) from very small to very small in the middle of the aspect ratio content you set. If you still can't understand it, maybe my language organization is not good enough. Then go to the official documentation

[Recommended course:

css video course

]

The above is the detailed content of How to center and adapt images in css. For more information, please follow other related articles on the PHP Chinese website!