Images
Documentation and examples for styling images via css classes.
Design
Image shapes
Add classes to an <img>
element to easily style images.
In addition, you can use the border-radius helper classes to give an image a custom border radius.
Responsive images
Images are made responsive with .img-fluid
class. max-width: 100%;
and height: auto;
are applied to the image so that it scales with the parent element.
.img-responsive
class is also supported for backwards compatibilty with Nordic Cool 3.
Resolution switching
If you suport multiple display resolutions and want to display larger or smaller images depending on the device, use <img>
tag with scrset
and/or sizes
atributes:
![Width based example image](../assets/img/example-large.png)
![Screen density example image](../assets/img/example-large.png)
Picture element
Use for:
- Art direction (ex: loading a simpler version of an image, on smaller displays).
- Offering alternative image formats.
- Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.
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.
![Example image for screen size between 1280px and 1024px](../assets/img/example-1280px-1024px.png)
<!-- Images -->
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-thumbnail">
<!-- Responsive images -->
<img src="..." class="img-fluid img-responsive" alt="Responsive image">
<!-- Resolution switching -->
<img srcset="..." sizes="..." class= alt="Width based example image">
<img srcset="..." class= alt="Screen density example image">
<!-- Picture element -->
<picture>
<source srcset="..." media="...">
<source srcset="..." media="...">
<img src="..." alt="...">
</picture>