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="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg" 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

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

3.object-fit: contain;## When

See the original picture above

4.object-fit: scale-down;

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!