The problem with automatic scaling

This code should work correctly (gets the proportions of the image from the image url). How about adding this to a plugin?

var sizes = img.offsetWidth;

if(img.srcset) {
  var dxd = img.srcset.split(',')[0].match(/-(\d+x\d+)+\./);
  if(dxd) {
    var [width, height] = dxd[1].split('x').map((e) => parseInt(e));
    if(typeof width == 'number' && typeof height == 'number') {
      sizes = Math.ceil(sizes * (width / height));
    }
  }
}

• This reply was modified 2 years ago by Andreslav.
• This reply was modified 2 years ago by Andreslav.

This snippet kind of does what I need

jQuery(document).on('lazybeforesizes', function (e) {
  let img = e.target;
  if(img.dataset.srcset && window.getComputedStyle(img)['object-fit'] == 'cover') {
    let dxd = img.dataset.srcset.split(',')[0].match(/-(\d+x\d+)+\./);
    if(dxd) {
      let [w, h] = dxd[1].split('x').map((e) => parseInt(e));
      if(typeof w == 'number' && typeof h == 'number') {
        let width = Math.ceil(e.detail.width * (w / h));
        if(width > e.detail.width) {
          e.detail.width = width;
        }
      }
    }
  }
});

• This reply was modified 2 years ago by Andreslav.

I think the first thing to check is what you are using to accomplish this setup? Essentially, is this stock WordPress behaviour?

@adamewww I didn’t understand the question.. I have square images in the gallery (plugin), and I can also use object-fit somewhere so that the images fill a certain area.

OK, here’s the summary, as essentially this would boil down to custom development:

• This is an aspect of srcset. Since srcset is based on width, so too is scaling
• Putting object-fit on top of this can potentially break it even further
• It would be possible to do this via JS, however, that’s not something we would put into the plugin since srcset doesn’t work that way.
• If you didn’t have srcset, you could potentially use our Easy IO CDN, which does automatic scaling, but that’s a premium option.

Okay, let’s consider the issue resolved.

Maybe someone in the future will find my fragment useful, and they will be able to find it here.

Improved version. The previous one might not work sometimes.

jQuery(document).on('lazybeforesizes', function (e) {
  let img = e.target;
  if(img.dataset.srcset && window.getComputedStyle(img)['object-fit'] == 'cover') {
    var dxd = img.dataset.srcset.match(/-(\d+x\d+)+\./);
    if(dxd) {
      let [w, h] = dxd[1].split('x').map((e) => parseInt(e));
      if(typeof w == 'number' && typeof h == 'number') {
        let width = Math.ceil(e.detail.width * (w / h));
        if(width > e.detail.width) {
          e.detail.width = width;
        }
      }
    }
  }
});