object-fit的属性

问:

object-fit

回答:

object-fit属性用于指定一个可替换元素（如）的内容应该如何适应其使用的高度和宽度。如果希望保持原图不会伸展变形，可以使用object-fit的值为"contain"，这样图片会在保持比例的同时尽可能的缩小以适应容器。举个例子，可以将CSS样式写成这样：

img { width: 200px; // 设置容器的宽度 height: 200px; // 设置容器的高度         object-fit: contain; // 图片会在此容器内保持比例缩放以适应容器，并且不会伸展变形 }

问:

object-fit什么属性可以保持原图不会伸展变形同时能够占满整个元素,相当于放大而不是使图片变形

回答:

要保持原图不会伸展变形同时能够占满整个元素，并相当于放大而不是使图片变形，可以使用object-fit属性的值为"cover"。这样图片会保持比例缩放，以便完全覆盖容器，并且不会变形。举个例子，可以将CSS样式写成这样：

img { width: 100%; // 设置容器的宽度 height: 100%; // 设置容器的高度 object-fit: cover; // 图片会在此容器内保持比例缩放以填充整个容器，同时不会变形 }

这样图片会被放大或缩小，以保持其原始比例，并填充整个容器，但可能会被截断一部分