Best practice for a full width image in wordpress

vitta picture vitta · Nov 2, 2017 · Viewed 10.5k times · Source

I'm trying to make a featured image 100% width, even if its pixel size is not the width of the screen/body: i'm using the 'full' variable when calling the image via get_the_post_thumbnail but i'm not sure what is the best practice to achieve what i want.

  • I can use some javascript (it works but i don't know if i like it anymore or if it's the right thing to do.)
  • I can upload very (2000/2500 px) large images, letting scrset manage the smaller sizes. But what if somebody is using a very big screen. And what about the size/quality of the image itself (even if i know how to handle image compression).
  • I can remove width and heigh, along with the sizes=(max-width:pixel) image attribute. This way i can add some css rule thal let me add some 100% widht to the image. But i don't now if this is correct.

Any suggestion?

Thanks

Answer

krentm picture krentm · Nov 2, 2017

Welcome to SO,

I'd recommend you use css:

#image{
  width: 100%;
}

so set the width to 100% and just omit height, and your picture will be spanned through whole width and the height is going to be in original ratio to width. About uploading large images, if you do, there will be longer loading times for the website. Lastly, you can use JavaScript for it if you want.