Images
Responsive
| Class | Result |
|---|---|
| .img-fluid |
height: auto; max-width: 100%; width: 100%; |
Usage
Images can be very complicated in emails. Luckily Bootstrap email makes it easy. Images need to have at least either a width or a height for them to render properly in something like Outlook. To keep an element full width of it’s container, give it the img-fluid. Doing so will set properties like the width="100%" attribute on the img tag which is required for Outlook rendering.
<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" />
For doing something other than 100% image with, use the sizing width and height utility classes with your images: Width Docs & Height Docs.
Accessibility
Make sure you include a descriptive alt property on every image, not only does this help with accessibility but it’s not uncommon for images to be blocked in an email client and this helps user see what image is being blocked. More on alt tags
Compiled Example
Input
<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" />
Output
<img class="img-fluid" src="https://bootstrapemail.com/some/image.png" alt="Some Image" style="height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; max-width: 100%; width: 100%; border: 0 none;" width="100%">