Question

我有类似这样的代码：

<div class='image-holder' style='width:128px; height:128px'>
    <img class='thumbnail' src='image1.png'>
</div>

.thumbnail的实际大小是未知的，并且可能不是确切的正方形。

因此，我要做的是根本不更改图像的尺寸（.thumbnail），而是仅在.image-holder元素内显示图像的中心（水平和垂直）。

例如，如果图像（.thumbnail）为256x256，则图像的内部128x128部分应显示在.image-holder内。

我愿意使用实际的img元素，或者对div使用background-image。我已经尝试过两个都没有成功。

我敢肯定，如果需要的话，我可以编写一些JavaScript来完成这项工作，但是我一直在寻找是否有纯CSS解决方案。

Answer 1

为此，您应该使用StopIteration。只需从中删除默认重复项，然后设置background-image

在这里查看：

background-position: center;

.image-holder {
  width:128px;
  height:128px;
  border: 1px solid red;
  margin: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

#holder-1 {
  background-image: url('http://via.placeholder.com/350x150');
}

#holder-2 {
  background-image: url('http://via.placeholder.com/100x100');
}

CSS可以将img在水平和垂直方向上居中放置而无需调整大小

1 个答案: