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
1.object-fit: cover;
<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
Original image size ratio2.object-fit: fill;
Rendering
See the original picture above3.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. RenderingSee 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 givenSummary: 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: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!