responsive images with srcset/sizes – width attribute overwrite

  • Dear All!

    Today I’ve learned about responsive image loading with srcset and sizes attributes in img tags. Awesome stuff ?? Implemented it right away in one of my pages. Now I’m running into the following problem:

    srcset and sizes attributes are populated correctly thanks to add_image_size and wp_calculate_image_sizes. But the img tags are also populated with width and height attributes and these break the expected behavior: the images are displayed in the size specified by the width and height attributes. When removing the width and height attributes with javascript (oh bad!), everything works just fine. I guess this is not the intended way to work this.

    Anyone can point me in the right direction?

    Thanks in advance

    Much love
    Henry

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    The width and height attributes are not a problem for responsiveness, they serve to define the image’s aspect ratio more than absolute size. It’s up to the theme to have an image behave responsively. Usually a CSS width of a particular percentage (often 100%) and a height of auto does the trick regardless of the height and width attributes in the img tag.

    All images inserted by WP in the default state include width and height attributes. They all behave responsively in all the default twenty* themes. If their presence affects responsiveness, there is something wrong with your theme. Try modifying the image CSS as mentioned above and see if that helps.

Viewing 1 replies (of 1 total)
  • The topic ‘responsive images with srcset/sizes – width attribute overwrite’ is closed to new replies.

Tags