问题:
物体适配
答案:
object-fit 属性用于指定可替换元素(例如
img { 宽度:200px; // 设置容器的宽度 height: 200px; // 设置容器的高度 object-fit: contains; // 图像将在此容器内保持比例缩放以适合容器,并且不会拉伸 Transform}
问题:
object-fit的哪些属性可以让原图在占据整个元素的同时不被拉伸变形,相当于放大而不是使图像变形
答案:
为了让原始图像不被拉伸变形而占据整个元素,相当于放大而不是使图像变形,可以使用object-fit属性的值来“覆盖”。这将使图像保持缩放状态,使其完全覆盖容器并且不会变形。例如,您可以这样编写 CSS 样式:
img { 宽度:100%; //设置容器的宽度height:100%; // 设置容器的高度 object-fit: cover; // 图像会在这个容器内保持比例缩放以填充整个容器,同时不会变形}
这样图像会被放大或缩小以保持其原始比例并填充整个容器,但可能会被部分截断