full width responsive image size

[Hamsterking]

hello danibe's friends i hope you all are doing well,
i always had a question that i never asked so i would like my image to be full width not full screen just the width on any screen how can i do that without deforming the original image, have i to prepare it on photoshop with specific size or there is a solution with html/css or js ?? or jquerry ?

[davy_yg]

Try this:

<div style="width: 100%"><img src="image1.jpg"></div>

[pty]

While Davy is almost right, setting the width of the surrounding div won't quite work; that will make the div itself 100% wide but not the contents. You'd need to apply the width: 100% to the image, as per this example.

[diafol]

It'll work, but sometimes you need different images to be used with different resolutions / sizes. Bad situations arise with: scaling up small images on larger screens or downloading a monster image on a tiny phone screen with little data allowance.

Have a look at srcset for <img> tags. A lot of fuss been made of <picture>, but this not needed more often than not (use for art direction possibly). Yes this does mean more work - but creating different sized images can be automated by php when you upload a large image. Just an idea.