keep the aspect ratio to zoom the picture, only ensure that the short edge of the picture can be fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be intercepted.
html structure
<div class="pic-box">
<img :src="item.picture" />
</div>due to the different length of the picture, the proportion is not fixed.
here is a real column implemented with a background image.
css itself has a relatively niche attribute object-fit,
you only need to set object-fit: cover to the img tag to Ok, which has the same effect as background-size:cover;.
if it is on a mobile phone, you can rest assured to use it. If you use it on pc, you need to consider compatibility. It is not compatible with IE
.for more information, please refer to the document
.Previous: How to set a uniform return status code in koa?
Next: The problem of index calculation on the second page of element ui table