object-fit 完美处理网页上图片显示比例问题

<style>
.hole_img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    overflow: hidden;
}
</style>


<img src="./images/1.png" class="hole_img">

html处理图片在页面上自适应显示，

项目是为了给国庆做一个简单的登录页面，找到一个合适的背景，但是图片比例没有与页面显示的长宽一致，如果直接用背景平铺或者拉伸就会出现，图片比例失衡的问题，看上去效果就特别差，后面找到以上的css代码就能完美解决这个问题：

CSS object-fit 属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

原图片:

处理后在页面上显示，