CODEWITHSUNDEEP
htmlcssimagesizing
user3311838
user3311838

Reputation: 181

Simple way to resize an image based on Screen resolution

I have searched for solutions to this requirement and not yet found one.

I would like to display images of 230(width)x 390(height) in an HTML page on multiple mobile devices such as iPhone 4/5, iPad 3/4, and Android devices.

Currently the image appears too big on iPhone4 and too small on iPad3.

How do I display these images based on screen size?

It is okay if it means the image will be stretched out on a bigger screen and not as clear.

Upvotes: 0

Views: 69

Answers (2)

J Prakash
J Prakash

Reputation: 1333

So if you want to use media queries :

[1]: http://jsfiddle.net/5hTkf/

The example is without retina display handling, but here is an article on handling that: Retina Display Media Queries

Upvotes: 0

Takoyaro
Takoyaro

Reputation: 946

Using background-size:contain, the background image of your div will stretch to fill the container.

background-size: contain;

Upvotes: 1

Related Questions