html - 在 gatsby-remark-images 中水平居中溢出其容器的图像

Question

我有一个 Gatsby.js 站点，它使用 gatsby-remark-images 来处理我的 markdown 文章中的图像。

文章有固定的宽度，但是图片两边都溢出了:

margin: 0 -15rem;

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

我喜欢使用 flexbox 解决方案，例如 this answer ，但它不起作用，因为 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>