Square Image Container

Use Square Image Container...

When you want an image to appear centered within a square container.
With a Fluid Image only.

Don't use Square Image Container...

If you just want the image to retain its original aspect ratio. Use a Responsive Image instead.
With a Responsive Image.
If you only intend to set the aspect ratio without centering it in a container. Use Aspect Ratio

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/800/100?q=1" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/200/400?q=2" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/100/800?q=3" />
        </SquareImageContainer>
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/400/200" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/800/100?q=1" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/200/400?q=2" />
        </SquareImageContainer>
      </Box>
    </Column>
    <Column span={3}>
      <Box bgc="strong" p={4}>
        <SquareImageContainer>
          <FluidImage src="https://picsum.photos/100/800?q=3" />
        </SquareImageContainer>
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img src="https://picsum.photos/400/200" class="swan-fluid-image" />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=1"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=2"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=3"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img src="https://picsum.photos/400/200" class="swan-fluid-image" />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=1"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=2"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-3">
      <div class="swan-bgc-strong swan-p-4">
        <div class="swan-square-image-container">
          <div class="swan-square-image-container-inner">
            <img
              src="https://picsum.photos/400/200?q=3"
              class="swan-fluid-image"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ReactVanilla

<SquareImageContainer>
  <FluidImage src="my-image.png" alt="My Alt Text" />
</SquareImageContainer>

<SquareImageContainer>
  <FluidImage src="my-image.png" alt="My Alt Text" />
</SquareImageContainer>

<div class="swan-square-image-container">
  <div class="swan-square-image-container-inner">
    <img src="my-image.png" alt="My Alt Text" class="swan-fluid-image" />
  </div>
</div>

<div class="swan-square-image-container">
  <div class="swan-square-image-container-inner">
    <img src="my-image.png" alt="My Alt Text" class="swan-fluid-image" />
  </div>
</div>

Square Image Container

Use Square Image Container...

Don't use Square Image Container...

Props

Related