Add cover option to image container component

releases.yml

@@ -4,6 +4,10 @@
       url: /docs/patterns/links#anchor-link
       status: New
       notes: We've introduced a new class <code>.p-link--anchor-heading</code> to style anchor links in headings.
+    - component: Image container / Cover
+      url: /docs/patterns/images#cover-image
+      status: New
+      notes: We've added a new cover variant to the image container component via <code>is-cover</code> class to support having images cover the container with predefined aspect ratio.
 - version: 4.13.0
   features:
     - component: Image container

scss/_patterns_image.scss

@@ -42,6 +42,14 @@
       max-height: 100%;
       object-fit: contain;
     }
+
+    &.is-cover {
+      .p-image-container__image {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+    }
   }
 
   .p-image-container--16-9 {

templates/docs/examples/patterns/image/combined.html

@@ -10,6 +10,7 @@
 <section>{% include 'docs/examples/patterns/image/shadowed.html' %}</section>
 <section>{% include 'docs/examples/patterns/image/spacing.html' %}</section>
 <section>{% include 'docs/examples/patterns/image/container/highlighted.html' %}</section>
+<section>{% include 'docs/examples/patterns/image/container/cover.html' %}</section>
 <section>{% include 'docs/examples/patterns/image/container/aspect-ratio/all.html' %}</section>
 {% endwith %}
 {% endblock %}

templates/docs/examples/patterns/image/container/cover.html

@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image Container / Cover{% endblock %}
+
+{% block standalone_css %}patterns_image{% endblock %}
+
+{% block content %}
+<div class="p-image-container--16-9 is-cover">
+  <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/44095efb-photo-1580536793208-117fdb20ffc1%20(1).jpeg" alt="" width="1000">
+</div>
+{% endblock %}

templates/docs/patterns/images.md

@@ -29,6 +29,14 @@ See the [class references section](#class-reference) for more information on the
 View example of image container with 16/9 aspect ratio
 </a></div>
 
+## Cover image
+
+Cover images are used to fill the entire container, cropping the image if necessary. This can be combined with the aspect ratio modifier to crop the image to a specific aspect ratio.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/image/container/cover" class="js-example">
+View example of cover image
+</a></div>
+
 ## Image with border
 
 <div class="p-notification--caution">