阐述如何实现 img 按照原比例最大化放置在 div 中?
要让 img
按照原比例最大化放置在 div
中,可通过以下几种方式实现:
使用 object - fit
属性
object - fit
是 CSS 中用于规定如何调整替换元素(如 <img>
、<video>
)的内容以适应其容器的属性。
object - fit: cover
:该值会使图像被缩放以填满整个div
容器,同时保持其原有的宽高比。超出容器的部分会被裁剪掉。例如:
div {width: 300px;height: 200px;overflow: hidden;
}
img {width: 100%;height: 100%;object - fit: cover;
}
object - fit: contain
:图像会被缩放以完全装入div
容器内,保持原比例,可能会在容器的一侧或两侧