Simple way to resize an image based on Screen resolution

Question

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.

there are a couple of ways to go about it, firstly, you can have device/browser dependent css and call those based on the return values. You could also have width and height be a percentage of the containing element. also, take a look here: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries — VikingBlooded
– VikingBlooded, Commented Jun 26, 2014 at 17:17

Takoyaro · Accepted Answer · 2014-06-26 17:17:08Z

1

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

background-size: contain;

answered Jun 26, 2014 at 17:17

Takoyaro

9567 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J Prakash · Accepted Answer · 2014-06-26 18:16:09Z

0

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

edited Jun 26, 2014 at 18:16

answered Jun 26, 2014 at 18:08

J Prakash

1,3418 silver badges13 bronze badges

Collectives™ on Stack Overflow

Simple way to resize an image based on Screen resolution

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related