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

Question

我想将非平方图像放入方形 div。我使用了overflow: hiddendiv 来剪辑图像的重叠部分。作品。

但是如何确保图像居中并且不在左上角的 0、0 处？手动设置这些值是没有选择的。

有什么提示吗？

谢谢你。

Answer 1

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

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

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

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