Img Src to Background-Image + object-fit:cover; polyfill for IE/Edge
Works in modern browsers and IE9+. IE8 users will see the Figure 1 problem format below.
View the source of this page to see the HTML markup, CSS and JS.
Images inserted into a web page via an <img> tag can be resized / scaled, but their sizing can be inconsistent (Figure 1).
If we set a height and width to force size uniformity, the images get squished / stretched to fill the space (Figure 2).
The CSS3 object-fit property can fix the problem in Chrome, Firefox, Safari, and Opera, BUT, it isn't supported in IE or Edge!
We *could* switch to <div> tags instead, and use CSS to set each picture as a background-image, with 'background-size:cover;' to scale proportionally while we resize, BUT, this doesn't translate easily for use within a CMS. It would be great if we could somehow make 'background-size:cover;' work on <img> tags until IE/Edge supports object-fit...
Note how the same image can be set to landscape or portrait, and 'background-size:cover;' will auto-fit it. Parts of the image that fall outside of the pre-defined placeholders will be cropped. Aspect ratio is maintained - no stretching or squishing.
I have structured the markup as a CMS would generate it (images are usually inserted inside a paragraph);
<p><img class="fit-img-landscape" src="pic-1.jpg" alt="" /><img class="fit-img-landscape" src="pic-2.jpg" alt="" /><img class="fit-img-landscape" src="pic-3.jpg" alt="" /></p>
But if you inspect one of the image elements with Developer Tools (F12), you'll see that the markup has been changed to;
<img class="fit-img-landscape" style="background-image:url(pic-1.jpg)" src="data:image/gif;base64,R...ICRAEAOw==" alt="" />
The fitImg(); function takes things one step further and makes use of the <p> wrappers within a CMS to overcome another problem - removing whitespace between inline-block elements by setting 'font-size:0;' on the parent element. If this doesn't suit your own setup, remove this line from the script;
img.parentNode.style.fontSize = '0'; /* counteract extra spacing from inline-block */
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.