html - Bootstrap 响应图像不会居中

Question

我正在尝试在 Bootstrap 网格中排列三张图片。在我向其中一张图像添加 img-responsive 类之前，所有图像都居中，这是我正在尝试的。然而，我确实希望图像能够响应，同时也使它们比它们已经大一点点。尝试了很多东西，例如“宽度:200%；”然而没有成功

它看起来如何

我在我的 css 中创建了一个“center-all”类，它应该将所有三个都居中，并且它确实有效，直到我将 img-responsive 类添加到红色类中。该类未添加到任何其他图像。

.center-all {
  text-align: center;
  align-items: center;
  align-content: center
  vertical-align: center;
}

JSFiddle

https://jsfiddle.net/8a6ee7f5/

图像在 Fiddle ofc 中不起作用。

我想要实现的目标:

我希望图像比当前大 2 倍，并且我希望它们能够响应，同时仍保持居中。

提前致谢!

Answer 1

我找到了问题的答案。

将 img-responsive 类添加到图像时，它会向左移动。通过将“center-block”添加到图像的类中，它应该保持在中心。

<img src="..." class="img-responsive center-block">

现在我只需要找到如何将我的图片放大到 200% 的答案。

编辑:我发现以下内容可以提升我的图像:

CSS

.wrapper {
  width: 40%;
}

并将其添加到我的图像类中。

HTML

<img src="..." class="img-responsive center-block wrapper">

然后就解决了。