Images
Standard responsive images
Code
<img src="../img/city_hall.png" alt="View from City Hall">
Usage
When working with images on your page or application, avoid applying a fixed width or height. This allows the image to be responsive on the page layout. By default, images in the Pattern Library have been styled to have a max-width of 100% applied to them.
Images will shrink or expand to fill their container, up to their maximum width.
Accessibility
Guidelines
Alt tag provides alternate description of an image, if it can not be displayed (Example: slow internet connection prevents an image from being loaded).
They are also read by screen readers to make them accessible to users with visual disabilities.
- All images should have their alt attribute filled out unless they are used for decorative purposes on the page.
- Describe the image if it contains information.
- Explain where the link will go if the image is setup as a link. Example: alt="Return to the Calgary.ca homepage"
- For images that are used for decoration only, use an empty alt=""
You can also provide alternate text by other means such as surrounding text.
Example: a photo with a caption text below.
Responsive images with percentage widths
A percentage width can be applied to images so the image size is relative to the container it is inside of. The image will keep its aspect ratio and proportions.
Example is an example where the image is given a width of 50%, relative to its container.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.
Code
<!-- Images size
- 100% width: add class 'cui-width-100'
- 75% width: add class 'cui-width-75'
- 55% width: add class 'cui-width-50'
- 25% width: add class 'cui-width-25'
Position the image:
- Floating right: add class 'float-right'
- Floating left: add class 'float-left'
-->
<img class="cui-width-100 float-left" src="../img/city_hall.png" alt="View from City Hall" />