Question

我有一个小块，图像宽度大于块。我想阻止中心等于图像中心。

图像中心和块中心必须位于1条垂直线上。我只希望看到图像的中心部分。

Answer 1

您可以使用transform属性

，而不是在图片上使用负边距

.img-container{
  width:100px;
  overflow:hidden;
}
.img-container img{
  transform: translateX(-50%);
}

https://jsfiddle.net/7gk07eLm/2/

Answer 2

你可以这样做

HTML

<div class="img-container">
    </div>

的CSS：

enter code here
.img-container{
 max-width: 100px;
 min-height: 580px;
 background-repeat: no-repeat;
 background-position: center;
 background-image: url(http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701);
}

Answer 3

我可以想到两种方法：

您可以使用后台css属性代替<img>代码，背景位置设置为居中，背景大小设置为覆盖<div>;在你的情况下，它将是这样的：

.img-container {
width: 100px;
height: 500px;
background: no-repeat center /cover url("path_to_your_image");
}

必须设置高度属性！

如果你想坚持使用<img>标签，它会看起来像这样：

.img-container {
width: 100px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.img-container img {
position: absolute;
  right: -1000%;
  left: -1000%;
  top: -1000%;
  bottom: -1000%;
  margin: auto;
}

图像的右侧，左侧，顶部和底部位置的疯狂数字是因为父<div>的小尺寸和图像本身的大尺寸 - 百分比基于父块的宽度和高度，所以在这种情况right: 100%;将是100px，这就是为什么你需要更大的数字来在更小的父块中定位更大的图像。

当然，值可以调整，只要它们是相同的图像就会居中。

在这两种情况下都必须设置高度，否则它将无效！

CSS图像居中

3 个答案: