css

前端布局时，图片会出现拉伸、缩放和变形的原因可能有多种: 1.例如图片的尺寸与容器不匹配 2.设置了错误的样式属性 3.浏览器压缩

比如像这样：

通过调整图片的尺寸、使用样式属性或使用背景图等方式来解决。 如果图片拉伸、缩放或变形是由于浏览器压缩造成的，可以使用响应式图片或使用压缩技术来解决。 还有一些其他的解决方案，根据具体情况而定。 今天着重介绍css方法解决，那就是object-fit属性

排列宽高不同，比例不同的图片，很容易破坏页面布局 。 如果此时给图片高度，图面会拉伸变形，巨丑。 这种情况下，我们可以使用object-fit属性 cover可以确保图片按原始宽高比例进行缩放，超出容器的部分会被裁剪掉 和object-fit配合的还有一个object-position属性 它可以指定图片显示的位置

object-position 是一种 CSS 样式属性，用于设置对象（如图片或视频）在容器中的位置。 通过设置 object-position 属性，可以改变对象在容器中的位置，从而实现布局上的调整。 该属性的值可以是一个具体的像素值，也可以是相对于容器的百分比值。 例如： 设置 {object-position: 50% 50%} 可以将对象在容器中居中显示。 该属性通常与 object-fit 属性一起使用，用于控制对象在容器中的大小和位置。