Content

Images

Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.

View page source on GitHub

On this page

Responsive images#

Images in felt-css are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

<img src="../../../docs/sample-photo.webp" class="img-fluid" alt="Sample photo" width="600" height="400">

felt-css's Reboot already gives every <img> and <svg> max-width: 100%, so images never overflow their parent. .img-fluid adds height: auto, which keeps the aspect ratio when the image has width and height attributes.

Image thumbnails#

In addition to the border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

<img src="../../../docs/sample-photo.webp" class="img-thumbnail" alt="Sample photo" width="300" height="200">

In the felt look, thumbnails, figure images and img.rounded lie on the felt like photos on a pin board: a hairline edge and a small shadow underneath.

Aligning images#

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

<img src="../../../docs/sample-photo.webp" class="rounded float-start" alt="Sample photo" width="200" height="133">
<img src="../../../docs/sample-photo.webp" class="rounded float-end" alt="Sample photo" width="200" height="133">

<img src="../../../docs/sample-photo.webp" class="rounded mx-auto d-block" alt="Sample photo" width="200" height="133">

<div class="text-center">
  <img src="../../../docs/sample-photo.webp" class="rounded" alt="Sample photo" width="200" height="133">
</div>

Picture#

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>