水平居中一个图像，该图像在盖茨比评论图像中溢出其容器

Question

我有一个盖茨比.js网站，使用gatsby-remark-images来处理我的降价文章中的图像。

文章具有固定宽度，但图像在两侧溢出：

margin: 0 -15rem;

这适用于跨越整个宽度的大图像，但较小的图像不会在父图像中居中。

我很想使用 flexbox 解决方案，就像这个答案一样，但它不起作用，因为gatsby-remark-images依靠 display: block; 来正确定位 base64 占位符图像和高分辨率图像。

当前生成的 html 如下所示：

<span class="gatsby-resp-image-wrapper">
  <span class="gatsby-resp-image-background-image"> <!-- the base64 image is a background of this span -->
    <img
      class="gatsby-resp-image-image"
      alt="My image"
      src="/static/b07bc/my-image.jpg"
      srcset="
        /static/d942e/my-image.jpg 320w,
        /static/c1221/my-image.jpg 640w,
        /static/b07bc/my-image.jpg 1280w"
      sizes="(max-width: 1280px) 100vw, 1280px"
    >
  </span>
</span>

和样式：

.gatsby-resp-image-wrapper {
  position: relative;
  display: block; /* for base64 image placeholder */
  margin: 0 -15rem; /* overflowing parent container */
  max-width: 1280px;
}
.gatsby-resp-image-background-image { /* this is the base64 image */
  padding-bottom: 75%;
  position: relative;
  bottom: 0;
  left: 0;
  background-image: url('data:image/jpeg;base64,/some/url/');
  background-size: cover;
  display: block;
}
.gatsby-resp-image-image {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
}

我怎样才能水平居中这一切？

我认为有两种可能的方法可以解决这个问题：

1. 用margin: 0 auto;居中图像，并找到另一种使其溢出父级的方法
2. 找到一种在没有margin和flexbox的情况下使图像居中的方法

有什么想法吗？

Answer 1

您可以添加一个处理居中的外部包装器，并允许现有图像包装器处理负边距溢出。

.outer-wrapper {
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}
.gatsby-resp-image-wrapper {
  position: relative;
  display: block; /* for base64 image placeholder */
  margin: 0 -15rem; /* overflowing parent container */
}
.gatsby-resp-image-background-image {
  /* this is the base64 image */
  padding-bottom: 75%;
  position: relative;
  bottom: 0;
  left: 0;
  background-size: cover;
  display: block;
}
.gatsby-resp-image-image {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="outer-wrapper">
  <span class="gatsby-resp-image-wrapper">
  <span class="gatsby-resp-image-background-image"> <!-- the base64 image is a background of this span -->
    <img
      class="gatsby-resp-image-image"
      alt="My image"
      src="https://picsum.photos/600/400"
      srcset="https://picsum.photos/600/400 320w,
        https://picsum.photos/600/400 640w,
        https://picsum.photos/600/400 1280w"
      sizes="(max-width: 1280px) 100vw, 1280px"
    >
  </span>
  </span>
</div>