0

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.

user3311838
  • 181
  • 1
  • 1
  • 7
  • 1
    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: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – VikingBlooded Jun 26 '14 at 17:17

2 Answers2

1

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

background-size: contain;

Takoyaro
  • 928
  • 7
  • 14
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

J Prakash
  • 1,323
  • 8
  • 13