Use width/heeight content attributes to determine physical aspect rat…

…io of images (fixes #642)

plugins/artdirect/README.md

@@ -59,7 +59,7 @@ You can use a whitespace separated list of tags on the `source` elements `data-t
 
 ## Providing aspect ratio information of physical images
 
-By providing the specific layout height and width (no `auto` values) through CSS and providing the physical aspect ratio of the images through either a `data-aspectratio` attribute or through `w` **and**`h` descriptors the plugin can choose the best image source.
+By providing the specific layout height and width (no `auto` values) through CSS and providing the physical aspect ratio of the images through either a `data-aspectratio` attribute or through `w` **and**`h` descriptors or through `width` and `height` content attributes the plugin can choose the best image source.
 
 ```html
 <style>

plugins/artdirect/ls.artdirect.js

@@ -28,16 +28,28 @@
 	var slice = [].slice;
 
 	function getCandidatesAspectRatio(element){
-		var match;
+		var match, width, height;
 		var ratio = parseFloat(element.getAttribute('data-aspectratio'));
 		var srcset = element.getAttribute(lazySizesConfig.srcsetAttr) || element.getAttribute('srcset');
 
-		if(!ratio && (match = srcset.match(regDescriptors))){
-			if(match[2] == 'w'){
-				ratio = match[1] / match[3];
+
+		if(!ratio){
+			match = srcset.match(regDescriptors);
+
+			if (match) {
+				if(match[2] == 'w'){
+					width = match[1];
+					height = match[3];
+				} else {
+					width = match[3];
+					height = match[1];
+				}
 			} else {
-				ratio = match[3] / match[1];
+				width = element.getAttribute('width');
+				height = element.getAttribute('height');
 			}
+
+			ratio = width / height;
 		}
 
 		return ratio;

plugins/parent-fit/README.md

@@ -10,7 +10,7 @@ import lazySizes from 'lazysizes';
 import 'lazysizes/plugins/parent-fit/ls.parent-fit';
 ```
 
-For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so either a `data-aspectratio` attribute has to be provided on the `source`/`img` element(s) or at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor. (MS Edge has problems to read image candidates using the h descriptor, which is fixed by the [respimg polyfill](../respimg))
+For this to work properly the physical aspect-ratio of the image candidates need to be calculable. To do so either a `data-aspectratio` attribute has to be provided on the `source`/`img` element(s) or through `width` and `height` content attributes or at least one of the image candidates inside the ``srcset`` attribute also need to include a **h** (height) descriptor. (MS Edge has problems to read image candidates using the h descriptor, which is fixed by the [respimg polyfill](../respimg))
 
 ### object-fit: contain|cover usage
 

plugins/parent-fit/ls.parent-fit.js

@@ -84,7 +84,7 @@
 		},
 
 		getImageRatio: function(element){
-			var i, srcset, media, ratio, match;
+			var i, srcset, media, ratio, match, width, height;
 			var parent = element.parentNode;
 			var elements = parent && regPicture.test(parent.nodeName || '') ?
 					parent.querySelectorAll('source, img') :
@@ -100,13 +100,25 @@
 				if(srcset && (!media || (window.matchMedia && matchMedia(media) || {}).matches )){
 					ratio = parseFloat(element.getAttribute('data-aspectratio'));
 
-					if(!ratio && (match = srcset.match(regDescriptors))){
-						if(match[2] == 'w'){
-							ratio = match[1] / match[3];
+					if (!ratio) {
+						match = srcset.match(regDescriptors);
+
+						if (match) {
+							if(match[2] == 'w'){
+								width = match[1];
+								height = match[3];
+							} else {
+								width = match[3];
+								height = match[1];
+							}
 						} else {
-							ratio = match[3] / match[1];
+							width = element.getAttribute('width');
+							height = element.getAttribute('height');
 						}
+
+						ratio = width / height;
 					}
+
 					break;
 				}
 			}