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 ?

Recommended Answers

All 3 Replies

Try this:

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

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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.