Merge pull request #553 from pat270/clay-545

#545 Add `.aspect-ratio-bg-contain`
liferay · Feb 14, 2018 · 554e197 · 554e197
2 parents cfb54b5 + f619662
commit 554e197
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/clay/src/content/images_aspect_ratio.html b/packages/clay/src/content/images_aspect_ratio.html
@@ -184,6 +184,11 @@ <h6>aspect-ratio-item-left-middle</h6>
 		<h3>Aspect Ratio Background Images</h3>
 	</div>
 
+	<div class="col-3">
+		<h6>aspect-ratio-bg-contain</h6>
+		<div class="aspect-ratio aspect-ratio-16-to-9 aspect-ratio-bg-contain" style="background-image: url({{rootPath}}/images/thumbnail_hot_air_ballon.jpg);">
+		</div>
+	</div>
 	<div class="col-3">
 		<h6>aspect-ratio-bg-cover</h6>
 		<div class="aspect-ratio aspect-ratio-16-to-9 aspect-ratio-bg-cover" style="background-image: url({{rootPath}}/images/thumbnail_hot_air_ballon.jpg);">

diff --git a/packages/clay/src/scss/components/_aspect-ratio.scss b/packages/clay/src/scss/components/_aspect-ratio.scss
@@ -165,6 +165,18 @@
 	@extend %aspect-ratio-16-to-9;
 }
 
+// Bg Contain
+
+%aspect-ratio-bg-contain {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain;
+}
+
+.aspect-ratio-bg-contain {
+	@extend %aspect-ratio-bg-contain;
+}
+
 // Bg Cover
 
 %aspect-ratio-bg-cover {