Aspect ratio from CSS variables

houlonglong · Sep 30, 2016 · cbfc59f · cbfc59f
1 parent e23fc19
commit cbfc59f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/plugins/rias/ls.rias.js b/plugins/rias/ls.rias.js
@@ -115,6 +115,12 @@
 			}
 		});
 
+		var elemStyles = window.getComputedStyle(elem);
+		var aspectRatio = elemStyles.getPropertyValue('--aspect-ratio').trim() || null;
+                if (aspectRatio) {
+                    options.ratio = aspectRatio;
+                }
+
 		return options;
 	}
 

diff --git a/rias/index.html b/rias/index.html
@@ -35,6 +35,12 @@
 			tab-size: 2;
 		}
 
+		.tall img {
+			--aspect-ratio: 2
+		}
+		.wide img {
+			--aspect-ratio: 0.5
+		}
 	</style>
 
 	<script>
@@ -92,6 +98,52 @@ <h3>Basic RIaS implementation</h3>
 			</div>
 		</div>
 
+		<div class="row">
+			<div class="col-sm-6">
+				<div class="thumbnail">
+					<div class="tall">
+						<img
+							 src="http://placehold.it/100x100"
+							 data-src="http://placehold.it/{width}x{height}"
+							 data-sizes="auto"
+							 class="lazyload"
+							 alt="" />
+					</div>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="thumbnail">
+					<div class="wide">
+						<img
+							 src="http://placehold.it/200x100"
+							 data-src="http://placehold.it/{width}x{height}"
+							 data-sizes="auto"
+							 class="lazyload"
+							 alt="" />
+					</div>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<h3>Aspect ratio</h3>
+				<p>In addition, you can set the ascpect ratio of the image from CSS. You only need to set the custom CSS variable <code>--aspect-ratio</code> on the <code>img</code> and add a <code>{height}</code> placeholder </p>
+<pre>
+&lt;style&gt;
+		img.rectangle {
+			--aspect-ratio: 0.5
+		}
+&lt;style/&gt;
+
+&lt;img
+	src="http://placehold.it/200x100"
+	data-src="http://placehold.it/{width}x{height}"
+	data-sizes="auto"
+	class="lazyload rectangle"
+	alt="" /&gt;
+</pre>
+			    <p>Note that you can also set the aspect ratio via a <code>data-ratio</code> value on the <code>img</code> tag.</p>
+			</div>
+		</div>
+
 		<div class="row">
 			<div class="col-sm-6">
 				<h3><abbr title="Responsive Image as Service">RIaS</abbr> and Art direction using the <code>picture</code> element</h3>