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

本文主要是介绍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 属性来切换被替换元素的内容对象在元素框内的对齐方式。

原图片:

处理后在页面上显示，

 

 

 

这篇关于object-fit 完美处理网页上图片显示比例问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---