Images
Standard Responsive Images
Code
<img class="cui-width-100" src="../img/city_hall.png" alt="View from City Hall">
Usage
Add images without fixed width or height to allow them to be responsive in their layout. Images will have a max-width: 100%; applied to them and not a fixed width.
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 Width
Example:
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 - Responsive
- set up the image
- 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:
- float-right: Add class 'float-right'
- float-left: Add class 'float-left'
-->
<img class="cui-width-100 float-left" src="../img/city_hall.png" alt="View from City Hall" />
Usage
You can also apply a percentage width on the image to maintain its proportions relative to the content it's in. This is useful for fluid type content layouts.
In the example above the image native size is 500px with a max-width of 400px and min-width of 225px. Its width is set to 45%.
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.