Images
We set styles for images to be responsive by default by applying max-width: 100%;
, height: auto;
. This will keep your images from expanding outside of their container. If you want to take things a step further you can use the class .wdn-stretch
to apply width: 100%
, thus always scaling the image to the size of the container.
You can also use the clear-top
class to remove top margin on text to align with image on the right.
Default image styling is built into the UNL web framework for you to use. The image styling documented here is intended for inline images in a page. A 'Hero' content type is also available for the large image-and-text-and-CTA designs that are typical at the top of site homepages. Please note, while other markup has been used in the past for this presentational treatment, the markup below is the current supported markup and will be the markup used moving forward.
For large, presentational images, review the UNLedu bands documentation.
Simple frame
Provide a simple, subtle frame around your image.
Important: use a <div class="wdn-frame">
in this case instead of a <figure>
. See the accessibility considerations for the frame border for more details.
Example HTML
<div class="wdn-frame">
<img src="graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
</div>
Image frame with caption
In many cases, a caption will provide more context and is important.
Example HTML
<figure class="wdn-frame">
<img src="graphics/image_templates/image_tag_ex.jpg" alt="Photo of the UNL Campus" />
<figcaption>The Union Plaza and greenspace at the University of Nebraska–Lincoln are beautiful in the spring.</figcaption>
</figure>
Accessibility Considerations:
- All images are required to have an
alt
attribute. Images that are purely decorative and do not contribute to page understanding can have an empty value, oralt=""
. All other images need to have a descriptive value, for examplealt="description of what is happening in the image"
. The alternative text is sent to assistive technology, including screen readers. The W3 offers a helpful tool to help you decide what your alt text should be. - Avoid using text in images, as the text will not be available to assistive technology. Instead place the desired text on top of the image with CSS.
- Only use a
<figure>
element to wrap your image if you have a<figcaption>
to go with it. If you just want a frame border, use the.wdn-frame
class as shown in the first example. This will help ensure the best compatibility with assistive technology. In fact, some assistive technology will ignore thealt
text and use the<figcaption>
instead. So if your<frame>
is missing a<figcaption>
, nothing will be read by the assistive technology.
- Printer-friendly version
- Log in to post comments
Comments
image frame alignment
How do you align a figure (image frame) without creating columns (essentially so the text wraps around it)?