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 ?

4 Months
Discussion Span
Last Post by diafol

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.


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.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.