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
The preview has been updated.
<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"><imgsrc="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"><imgsrc="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"><imgsrc="https://picsum.photos/400/200?q=3"class="swan-fluid-image"/></div></div></div></div></div></div>
<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>
