3 ms·

The point in the article is you don't need that wrapper. Just add the width & height to the image, and give the image `height:auto`.

chiefalchemist 4y ago
And what about object-fit? Best I can tell, the article works if you are 100% certain that all the images in the srcset have the same aspect ratio. With, for example WordPress, that is often not the case.
- jaffathecake 4y ago
  All images in the srcset are supposed to be the same aspect ratio. If WordPress is doing something different then it's a bad implementation. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:viewport-based-selection-2 https://html.spec.whatwg.org/multipage/images.html#introduct... > The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). If you want different representations of the content, those should be different <source>s. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:art-direction-3 https://html.spec.whatwg.org/multipage/images.html#introduct... > The picture element and the source element, together with the media attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image). More details on responsive images in general https://jakearchibald.com/2015/anatomy-of-responsive-images/ https://jakearchibald.com/2015/anatomy-of-responsive-images/.
  - jaffathecake 4y ago
    I just threw together a test page, and it seems like WordPress does the right thing https://jakesdemosite975920295.wordpress.com/2022/07/12/test-post-title/ https://jakesdemosite975920295.wordpress.com/2022/07/12/test.... Maybe you're using a custom theme that introduces buggy behaviour?
    - chiefalchemist 4y ago
      I don't think so. I've seen this behavior for years across a number of themes and projects, as well as inspecting sites with dev tools. WordPress can't know, or at least be 100% certain of the image's dimensions. Yes, you can add custom images but there's no guarantee those will yield after the auto-resizing.
      - jaffathecake 4y ago
        I created a wordpress post, added an image, and it generated a srcset. Every image had the same aspect ratio. What am I missing? Can you show me an example of the issue you're seeing, because if Wordpress is doing that, it's a bug, and I'd like to get them to fix it.
        chiefalchemist 4y ago
        What are the register image sizes in WP? Also, have to uploaded any images that might not satisfy the necessary dimensions. If WP was doing it correctly all the time there would be a question or two per week about images in the various WP groups I'm in. At the end of the day, you can have rules for WP cropping / resizing images. But those don't necessary guarantee the dimension of the image output from that. And WP certainly isn't checking each any every image for it's actual dimensions. And WP aside, it just doesn't make sense any output from a CMS is going to exactly what you expect. object-fit is a fail-safe. Object-fit is also smarter and better than a fixed size background image. The article has a narrow-ish use case.
  - chiefalchemist 4y ago
    Am I blind? In the first link, I don't see anything there that demands the images all have the same aspect ratio. Regardless, when using WP this isn't going to happen. Furthermore, even if all the images in the srcset have the same a-ratio, that doesn't mean that ratio is the same as the ratio in the markup + CSS. Yeah, you can assume. But why risk it?
    - jaffathecake 4y ago
      > In the first link, I don't see anything there that demands the images all have the same aspect ratio. It says "the smaller image is a scaled-down version of the bigger image". If you scale an image down evenly, it will have the same aspect-ratio. In case you're going to pick at the wording: I know that it's the intention of the spec authors and browser implementers that all entries in the srcset have the same ratio. > even if all the images in the srcset have the same a-ratio, that doesn't mean that ratio is the same as the ratio in the markup + CSS. Yeah, you can assume. But why risk it? The last section of the article discusses this.

chiefalchemist 4y ago

And what about object-fit? Best I can tell, the article works if you are 100% certain that all the images in the srcset have the same aspect ratio. With, for example WordPress, that is often not the case.

jaffathecake 4y ago
All images in the srcset are supposed to be the same aspect ratio. If WordPress is doing something different then it's a bad implementation. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:viewport-based-selection-2 https://html.spec.whatwg.org/multipage/images.html#introduct... > The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). If you want different representations of the content, those should be different <source>s. From https://html.spec.whatwg.org/multipage/images.html#introduction-3:art-direction-3 https://html.spec.whatwg.org/multipage/images.html#introduct... > The picture element and the source element, together with the media attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image). More details on responsive images in general https://jakearchibald.com/2015/anatomy-of-responsive-images/ https://jakearchibald.com/2015/anatomy-of-responsive-images/.
- jaffathecake 4y ago
  I just threw together a test page, and it seems like WordPress does the right thing https://jakesdemosite975920295.wordpress.com/2022/07/12/test-post-title/ https://jakesdemosite975920295.wordpress.com/2022/07/12/test.... Maybe you're using a custom theme that introduces buggy behaviour?
  - chiefalchemist 4y ago
    I don't think so. I've seen this behavior for years across a number of themes and projects, as well as inspecting sites with dev tools. WordPress can't know, or at least be 100% certain of the image's dimensions. Yes, you can add custom images but there's no guarantee those will yield after the auto-resizing.
    - jaffathecake 4y ago
      I created a wordpress post, added an image, and it generated a srcset. Every image had the same aspect ratio. What am I missing? Can you show me an example of the issue you're seeing, because if Wordpress is doing that, it's a bug, and I'd like to get them to fix it.
      - chiefalchemist 4y ago
        What are the register image sizes in WP? Also, have to uploaded any images that might not satisfy the necessary dimensions. If WP was doing it correctly all the time there would be a question or two per week about images in the various WP groups I'm in. At the end of the day, you can have rules for WP cropping / resizing images. But those don't necessary guarantee the dimension of the image output from that. And WP certainly isn't checking each any every image for it's actual dimensions. And WP aside, it just doesn't make sense any output from a CMS is going to exactly what you expect. object-fit is a fail-safe. Object-fit is also smarter and better than a fixed size background image. The article has a narrow-ish use case.
- chiefalchemist 4y ago
  Am I blind? In the first link, I don't see anything there that demands the images all have the same aspect ratio. Regardless, when using WP this isn't going to happen. Furthermore, even if all the images in the srcset have the same a-ratio, that doesn't mean that ratio is the same as the ratio in the markup + CSS. Yeah, you can assume. But why risk it?
  - jaffathecake 4y ago
    > In the first link, I don't see anything there that demands the images all have the same aspect ratio. It says "the smaller image is a scaled-down version of the bigger image". If you scale an image down evenly, it will have the same aspect-ratio. In case you're going to pick at the wording: I know that it's the intention of the spec authors and browser implementers that all entries in the srcset have the same ratio. > even if all the images in the srcset have the same a-ratio, that doesn't mean that ratio is the same as the ratio in the markup + CSS. Yeah, you can assume. But why risk it? The last section of the article discusses this.