CODEWITHSUNDEEP
phpwordpressimageresponsivesrcset
Paul King
Paul King

Reputation: 65

WordPress images are not displayed correctly in responsive it gets fixed height and width

I am in the process of building a new site using wordpress 4.6.1. Out of the box it supports responsive images. I have created a new theme and have simply added the loop to display the post content. When I insert an image into a post it displays the image correctly but it isn't responsive i.e. it does not serve a different image dependant on the browser size.

The image HTML generated is as follows:

`<img
width="1110"
height="740"
src="http://digitaltestsite2.biz/wp-content/uploads/2016/08/Feature-Story-1110x740.jpg"
class="attachment-large size-large wp-post-image"
alt="Feature Story"
srcset="
    /wp-content/uploads/2016/08/Feature-Story-1110x740.jpg 1110w,
    /wp-content/uploads/2016/08/Feature-Story-600x400.jpg 600w,
    /wp-content/uploads/2016/08/Feature-Story-768x512.jpg 768w,
    /wp-content/uploads/2016/08/Feature-Story-250x167.jpg 250w,
    /wp-content/uploads/2016/08/Feature-Story-500x333.jpg 500w,
    /wp-content/uploads/2016/08/Feature-Story-350x233.jpg 350w,
    /wp-content/uploads/2016/08/Feature-Story-700x466.jpg 700w,
    /wp-content/uploads/2016/08/Feature-Story.jpg 1200w
"
sizes="
    (min-width:1199px) 1110px,
    (min-width:991px) 768px,
    (min-width:767px) 590px,
    (min-width:543px) 500px,
    295px
"

`

(N.B. I have added a filter for the sizes attribute to enable more breakpoints.)

If I remove the width and height the image is responsive but wordpress seems to be generating this so I dont believe I should have to remove it. I have tried and replicated this in both Chrome and Firefox.

Does anyone have any suggestions as to whether this is the correct behaviour and/or if I am doing anything wrong?

Thanks in advance for any input.

Upvotes: 1

Views: 1833

Answers (1)

Eric Portis
Eric Portis

Reputation: 196

Testing this stuff can be tricky. For one, once Chrome (and I think Firefox and Safari, too) have a resource that is larger than they need in the cache, they will not load smaller ones over the network. For two, sizes can be fiendishly complex to mentally model...

Fixing it by removing width and height makes no sense, as I believe the parsed sizes size trumps the width when it comes time to determine layout width, and which resource to load out of the srcset.

I suggest:

  1. Try clearing your cache between tests
  2. Even if that solves it... whenever you're doing anything with responsive images feeding your page into https://ausi.github.io/respimagelint/ is always a good idea!

Upvotes: 1

Related Questions