Atomic Bulldog - UI/pattern library

1.7 - Media cover

Source: atoms/_media-and-bg-cover.scss, line 85

Open in new window

.media-cover

Default position is center center

Examples:

Default styling

.is-top-left

Top left

.is-top-center

Top center

.is-top-right

Top right

.is-center-left

Center left

.is-center-right

Center Right

.is-bottom-left

Bottom left

.is-bottom-center

Bottom center

.is-bottom-right

Bottom right

<div style="max-width: 500px"> <!-- Just for kss -->
 <div class="aspect-ratio-container is-silver">
   <div class="aspect-ratio-content">
     <img class="media-cover [modifier]"
     srcset="https://source.unsplash.com/random?preset=contain-xs 320w,
     https://source.unsplash.com/random?preset=contain-sm 570w,
     https://source.unsplash.com/random?preset=contain-md 860w,
     https://source.unsplash.com/random?preset=contain-lg 1150w,
     https://source.unsplash.com/random?preset=contain-xl 1400w"
     src="https://source.unsplash.com/random?preset=contain-xl"
     alt="Alternative text">
   </div>
 </div>
</div>