CSS防止图片变形object-fit

FontSize: 【小中大】

网页里的图片，为了防止图片变形，通常会指定图片的宽度和高度，通过设置width和height属性，将图片的宽度和高度固定。例如：

<img alt="什么是响应式网站" src="/uploadfile/images/seo/responsive-website.png" style="height:400px; width:497px" />

这种方法适合PC端的网站，即前面所说的针对电脑端的网站。这种网站中间版块的宽度通常是固定的，包括img、div等标签的大小都是固定的。

但随着响应式网站的诞生，响应式网站也称为自适应网站，版块的宽度是随着设备的宽度改变而改变，如果图片的样式是固定的，布局会变得比较难看。

响应式网站中，图片的宽度与高度通常是父容器的100%，例如：

<img alt="什么是响应式网站" src="/uploadfile/images/seo/responsive-website.png" style="height:100%; width:100%" />

由于img父容器的宽度是不固定的，有可能出现图片变形无法保持等比例缩放，这时候，可以使用CSS3样式表里面的object-fit属性，例如：

<img alt="什么是响应式网站" src="/uploadfile/images/seo/responsive-website.png" style="height:100%; width:100%;object-fit: cover;" />

cover值会将图片等比例缩放并填充满容器，但可能会裁剪部分图片。

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

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

语法：

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值。
inherit	从该元素的父元素继承属性。

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

object-position: position|initial|inherit;

值	描述
position	指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有： object-position: 50% 50%; object-position: right top; object-position: left bottom; object-position: 250px 125px;
initial	设置为默认值。
inherit	从该元素的父元素继承属性。

值

描述

position

指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有：

object-position: 50% 50%;

object-position: right top;

object-position: left bottom;

object-position: 250px 125px;

initial

设置为默认值。

inherit

从该元素的父元素继承属性。