We set styles for images to be responsive by default by applying
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.
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.
<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.
<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>
- All images are required to have an
altattribute. Images that are purely decorative and do not contribute to page understanding can have an empty value, or
alt="". All other images need to have a descriptive value, for example
alt="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-frameclass as shown in the first example. This will help ensure the best compatibility with assistive technology. In fact, some assistive technology will ignore the
alttext and use the
<figcaption>instead. So if your
<frame>is missing a
<figcaption>, nothing will be read by the assistive technology.