Горизонтально центрируйте изображение, которое переполняет его контейнер в gatsby -mark-images - PullRequest
Новая
       8

Горизонтально центрируйте изображение, которое переполняет его контейнер в gatsby -mark-images

0 голосов
/ 24 декабря 2018

У меня есть сайт Gatsby.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

Есть идеи?

1 Ответ

0 голосов
/ 24 декабря 2018

Вы можете добавить внешнюю оболочку, которая обрабатывает центрирование, и позволить существующей оболочке изображения обрабатывать переполнение отрицательного поля. 

.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>
...