0

I am making a WP theme from scratch and I don't seem to get the responsive images working. An image that's inserted at 500px will stay at 500px even though srcset and sizes tags are added. From my understanding this image should display automatically at 300px on the mobile phones?

<img class="alignleft size-full wp-image-446" 
src="couple_group_session.jpg" alt="" width="500" height="333" 
srcset="couple_group_session.jpg 500w, 
couple_group_session-300x200.jpg 300w" 
sizes="(max-width: 500px) 100vw, 500px">

still displaying at 500px

Should I be adding something in the Wordpress functions.php file to actually get it working?

  • 1
    Nothing required in WP. This is CSS and HTML only. – jdm2112 Mar 5 '18 at 16:58
0

Yes as the comment suggests you need to add max-width:100%; height:auto; to your img's , you are not containing the image inside the div so there is nothing to tell srcset to use the smaller version.

  • Thank you, that worked. I think I misunderstood what "sizes 100vw" was, I thought it was the same as setting the max width of the image to 100%. – Natalia Mar 5 '18 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.