rename aspect-ratio to aspectratio fixes #557

aFarkas · Dec 8, 2018 · 34654e8 · 34654e8
1 parent 53f40df
commit 34654e8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/plugins/rias/ls.rias.js b/plugins/rias/ls.rias.js
@@ -43,7 +43,7 @@
 			widthmap: {},
 			ratio: false,
 			traditionalRatio: false,
-			'aspect-ratio': false,
+			aspectratio: false,
 		};
 
 		config = (lazySizes && lazySizes.cfg) || window.lazySizesConfig;
@@ -161,8 +161,8 @@
 
 		options.widths.forEach(function(width){
 			var widthAlias = options.widthmap[width] || width;
-			var ratio = options['aspect-ratio'] || options.ratio;
-			var traditionalRatio = !options['aspect-ratio'] && riasCfg.traditionalRatio;
+			var ratio = options.aspectratio || options.ratio;
+			var traditionalRatio = !options.aspectratio && riasCfg.traditionalRatio;
 			var candidate = {
 				u: url.replace(regWidth, widthAlias)
 						.replace(regHeight, ratio ?

diff --git a/rias/index.html b/rias/index.html
@@ -36,10 +36,10 @@
 		}
 
 		.tall img {
-			--ls-ratio: 2
+			--ls-aspectratio: 0.5;
 		}
 		.wide img {
-			--ls-ratio: 0.5;
+			--ls-aspectratio: 2;
 		}
 	</style>
 
@@ -125,11 +125,11 @@ <h3>Basic RIaS implementation</h3>
 			</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>--ls-ratio</code> on the <code>img</code> and add a <code>{height}</code> placeholder </p>
+				<p>In addition, you can set the ascpect ratio of the image from CSS. You only need to set the custom CSS variable <code>--ls-aspectratio</code> on the <code>img</code> and add a <code>{height}</code> placeholder </p>
 <pre>
 &lt;style&gt;
 		img.rectangle {
-			--ls-ratio: 0.5
+			--ls-aspectratio: 2;
 		}
 &lt;style/&gt;
 
@@ -140,7 +140,7 @@ <h3>Aspect ratio</h3>
 	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>
+			    <p>Note that you can also set the aspect ratio via a <code>data-aspectratio</code> value on the <code>img</code> tag.</p>
 			</div>
 		</div>