Question

我要在我的应用程序中显示一些html图像，其宽度可能会有很大差异，但图像的重要部分始终位于中心，宽度约为120像素。

尝试以所有宽度（或甚至是其百分比）显示图像会使应用程序的其他一些内容无法正确显示，如果设置为某个宽度，图像可能会变得非常变形。

所以最好的办法是创建一个固定宽度的div，而不是只显示图像中心的滚动条，所以如果图像是例如400 px，它应该从宽度像素140到宽度像素显示260如果600从240到360等等（边框不会显示）。

我认为我不知道做这样的事情，希望你能引导我，谢谢。

Answer 1

如果您知道图像尺寸，可以这样做

.image {
    position: relative;
    width: 200px; /* Outer box width */
    height: 200px;  /* Outer box height */
    overflow: hidden;
}
.image img {
    position: absolute;
    left: 50%;
    margin-left: -150px; /* 50% of image width */
}

Answer 2

您可以创建一个以图像为背景的div，并为其指定CSS属性：

background: url(path to your image) no-repeat center center;

如果您希望图像具有适合容器的最佳尺寸，则可以使用：

background-size: cover;

将图像的中心对准在div中

2 个答案: