居中在一个div中的图像的中心

Question

我必须在我的应用程序中显示一些HTML图像，其宽度可以差别很大，但图像的重要部分始终位于中心，宽度大约为120像素。

尝试以全部宽度显示图像（甚至以其百分比显示）会产生应用程序的其他一些内容，无法正确显示，并且如果设置为特定宽度，图像可能变得非常变形。

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

我认为没有办法用我的知识做这样的事情，希望你能指导我，谢谢。

Answer 1

你可以创建你的图像作为背景一个div，并给它这个CSS属性：

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

如果你想要的形象有一个最佳规模，以适应在容器中，你可以使用：

background-size: cover; 

Answer 2

如果您知道图像的大小，你可以像这样

.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 */ 
}