Inline Images
Images are content used to visually support text, providing additional semantic information and often placed alongside text to add context. Images stand on their own as content and should not be used as backgrounds that do not offer additional meaning.
A caption is a brief explanation of what is happening in the image and can be used to add information; it is commonly placed under the referred image.
Usage
Images add visual engagement as well as context to the text that is written. Images appear inline with the text, meaning that the text will wrap around the image. Captions should be kept brief and relevant to the image.
Example 1
Low Library was built with a gift from University President Seth Low, in memory of his father Abiel Abbot Low. The Rotunda, capped by a granite dome 105.5 feet high, is the center of the building. The building features four event spaces that can be utilized for a variety of activities. Originally used as a reading room when the building served as a library, the Low Rotunda in particular is a dramatic space and now the setting for events of all scales.
Example 2
Students walk around the Columbia University Morningside campus.
<h1 class="page-title">Image Gallery</h1>
<style type="text/css">
*, *::before, *::after {
box-sizing: border-box;
}
body {
background: #FFFFFF;
color: #000000;
font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Avenir, "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
}
.custom_caption_box {
display: inline-block;
margin: 0;
position: relative;
width: auto;
}
.custom_caption_box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.custom_caption_text {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
color: #000000;
}
.aspect-ratio-label {
font-size: 14px;
font-weight: 600;
margin: 0 0 4px 0;
}
.aspect16x9 {
aspect-ratio: 16 / 9;
}
.aspect9x16 {
aspect-ratio: 9 / 16;
}
.aspect4x3 {
aspect-ratio: 4 / 3;
}
.aspect3x4 {
aspect-ratio: 3 / 4;
}
.aspect1x1 {
aspect-ratio: 1 / 1;
}
</style>
<div class="custom_caption_img" role="list">
<!-- 16:9 -->
<figure class="custom_caption_box aspect16x9" role="listitem">
<img
alt="View of Columbia University campus in 16:9 aspect ratio."
data-entity-type=""
data-entity-uuid=""
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/View_of_Columbia_University.jpg/640px-View_of_Columbia_University.jpg"
width="640"
height="360"
loading="lazy"
decoding="async"
/>
<figcaption class="custom_caption_text">
<span class="aspect-ratio-label">16:9</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat, nec sodales odio sollicitudin a. Nunc quis placerat enim, a pulvinar tortor. Fusce eu lectus nec ligula mollis tempor.
</figcaption>
</figure>
<!-- 3:4 -->
<figure class="custom_caption_box aspect3x4" role="listitem">
<img
alt="View of Columbia University campus in 3:4 aspect ratio."
data-entity-type=""
data-entity-uuid=""
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/View_of_Columbia_University.jpg/640px-View_of_Columbia_University.jpg"
width="640"
height="853"
loading="lazy"
decoding="async"
/>
<figcaption class="custom_caption_text">
<span class="aspect-ratio-label">3:4</span>
Photo Credit Daniels Flicker Book.
</figcaption>
</figure>
<!-- 1:1 -->
<figure class="custom_caption_box aspect1x1" role="listitem">
<img
alt="View of Columbia University campus in 1:1 aspect ratio."
data-entity-type=""
data-entity-uuid=""
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/View_of_Columbia_University.jpg/640px-View_of_Columbia_University.jpg"
width="640"
height="640"
loading="lazy"
decoding="async"
/>
<figcaption class="custom_caption_text">
<span class="aspect-ratio-label">1:1</span>
</figcaption>
</figure>
</div>