Media
Utilities for images and video
Responsive Image Utilities
By default, images are responsive and will stretch to the width of their parent container while the height will remain proportional.
| Class Name | Example | Image Ratio |
|---|---|---|
| .image-one-by-one |  |
1:1 |
| .image-sixteen-by-nine |  |
16:9 |
| .image-four-by-three |  |
4:3 |
| .image-three-by-two |  |
3:2 |
| .image-two-by-three |  |
2:3 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card">
<div class="image-sixteen-by-nine">
<img src="https://dds.dev3.digitalservices.syr.edu/ddsv2-dev/images/SFS_LashunKingLab_0006.original.jpg" alt="example image" />
</div>
<div class="background-white padding-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>Fixed Width Images
In addition to responsive images the design system provides a series of common fixed width image sizes, as well as a reset an image to its actual dimensions. Fixed width image sizes are useful for avatars and thumbnail images.
| Class Name | Example | Image Ratio |
|---|---|---|
| .image-64x64 |  |
64 x 64px |
| .image-96x96 |  |
96 x 96px |
| .image-128x128 |  |
128 x 128px |
Responsive Video
The responsive video class functions similarly to the responsive image classes. The .video class will stretch to 100% width of its container and will maintain a 16:9 aspect ratio.
<div class="video">
<iframe src="https://www.youtube.com/embed/BHACKCNDMW8' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>