Question

我有一个Gatsby.js网站，该网站使用gatsby-remark-images处理我的降价商品中的图像。

文章的宽度是固定的，但是图像的两面都是溢出的：

margin: 0 -15rem;

这对于跨整个宽度的大图像效果很好，但是较小的图像不在父图像中居中。

我很想像this answer中那样使用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;
}

如何将所有这些内容居中？

我认为有两种方法可以解决此问题：

使用margin: 0 auto;将图片居中，并找到另一种方法使图片溢出父图片
找到一种在没有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>

在gatsby-remark-images中

1 个答案: