I'm building a Wordpress theme that will use imported posts from another site. These posts have images that vary in size and aspect ratio. There are predefined areas on the new theme where these image must fit, and fill the area, with centering and without letterboxing. Without breaking the semantics of the img tag by using background images, I've put together a few techniques I've seen elsewhere to scale images and fit/center them to a panel, like this:
CSS:
.fillwidth {
width: 100%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.fillheight {
height: 100%;
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
border: 1px solid black;
overflow: hidden;
position: relative;
}
JS:
<script src="http://localhost/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script>
(function($){
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
})(window.jQuery);
</script>
HTML:
<div>
<img src="test.jpg" />
</div>
So basically the JS determines the aspect ratio, the image is fit to the box and a transform centers it.
Now my question is, on a high traffic Wordpress site, would you recommend allowing the user's browser to do this resizing on the front end, or should the theme create multiple versions of uploaded images to fit the various panels on the site in advance? With modern browsers what is the impact of asking the browser to do the scaling and resizing of images?
