如何在平方div中挤压图像进行缩放

Question

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

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

任何提示？

谢谢。

Answer 1

您可以使用absolute和relative定位轻松实现此目标。例如：

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

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

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