html - 你如何在方形 div 中压缩图像以进行缩放

Question

我想将非方形图像放入方形 div 中。我在 div 上使用了 overflow: hidden 来剪裁图像的重叠部分。作品。

但是如何确保图像居中并且不位于左上角的 0, 0 处？无法手动设置这些值。

有什么提示吗？

谢谢。

Answer 1

您可以使用绝对 和相对 定位轻松实现这一点。例如:

#myImage {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#myImage img {
    position: absolute;
    top: -25%;
    left: -50%;
}

这是一个 jsFiddle Demo .您可能需要根据图像的大小更改图像的位置。