Reply To: Picture Loader for HTML page

[Beverleyh]

Is it just a display thing? In the sense that maybe a client is inserting images of all different sizes into their page via the CMS, possibly attempting to drag corners to visually resize, and the resulting jumble of sizes look messy and distorted? Is the goal to create a bit more uniformity?

If so, this might help http://fofwebdesign.co.uk/template/_testing/img-src-to-background-size-cover.htm

The idea is that it takes the src of an img tag (typically the way that images are inserted into a web page using a CMS WYSIWYG editor) and switches it to a background-image. At that point, ‘background-size:cover;’ kicks in for visual containment and faux-cropping.

There is the ‘object-fit’ property that already achieves this in Chrome, Firefox, Opera, Safari and the likes, but IE and Edge don’t support it. My workaround linked above is kind-of a polyfill for that.

I have it setup with TinyMCE as a custom styles selection on the WYSIWYG toolbar; The user embeds an image then can easily apply a class for either portrait or landscape proportions. It works pretty well :)