Жидкость изображения Гэтсби выходит за пределы вертикального размера контейнера.

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

Проблема в том, что, хотя фотографии, снятые в альбомной ориентации, ограничены правильно, фотографии, снятые в портретной ориентации, заполняют все горизонтальное пространство, но переполняют вертикальное пространство.

В документации есть заявление

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

Однако, по моим наблюдениям, он растягивается только по ширине, а не по высоте.

Я упростил свою проблему в этом небольшом примере, который пытается содержать изображения в контейнере 400x400 пикселей:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Img from "gatsby-image"

export default (props) => {
  const { data } = props;
  return (
    <Layout>
      <div style={{height: "400px", width: "400px", background: "white" }}>
        <Img fluid={ data.file.childImageSharp.fluid } />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($id: String!) {
    file(id: { eq: $id }) {
      childImageSharp {
        fluid(maxWidth: 500, maxHeight: 500, fit: INSIDE) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

В примере с альбомной ориентацией изображение ограничено шириной содержащего его div: Пример ландшафта

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

Пример книжной ориентации

Как сделать так, чтобы изображение Гэтсби было уменьшено, чтобы его можно было ограничить доступным вертикальным пространством?

p.s. закругленные углы в примерах изображений являются остатками класса начальной загрузки из более старого решения, но его присутствие не повлияло на рассматриваемую проблему.


gatsby gatsby-image
person Pete    schedule 24.07.2020    source источник
comment
Вы хотите, чтобы изображения были размером 400 x 400 пикселей?   -  person ksav    schedule 25.07.2020
comment
Нет, это было просто для иллюстрации того, что изображение выходит за пределы контейнера, когда оно находится в портретной ориентации, но остается внутри контейнера, когда оно находится в альбомной ориентации. Однако, похоже, я понял это   -  person Pete    schedule 25.07.2020

Ответы (1)


arrow_upward
2
arrow_downward

Похоже, что если я добавлю свойства CSS height и object-fit к тегу <Img />, он будет работать так, как я задумал. (в Firefox и Chrome)

<Img
  style={{ height: "100%", width: "100%" }}
  imgStyle={{ objectFit: "contain" }}
  fluid={ data.file.childImageSharp.fluid }
/>

Это дает желаемый результат как в моем упрощенном примере, так и в фактическом макете на основе гибкого блока.

person Pete    schedule 25.07.2020