The most troublesome screen resolution on mobile is surely the portrait mode of smartphones. CSS can handle this kind of resolution via Media Queries or, alternatively, through a specific set of styles (very flexible). In this particular case-scenario, images are a particular feature that need to be tested very carefully. Our goal is to make wider image scales automatically in portrait mode on smartphones. For our tests we're going to use Safari Mobile (iOS 7) and Google Chrome (desktop).
The first thing we need to add to our test page is the specific viewport meta tag for mobile browsers:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
We assume a minimum screen resolution of 320 pixels. First we'll insert in our test page an image whose dimensions are 320 X 239 pixels:
<div id="container">
<img src="img/image-320.jpg" alt="" />
</div>
Now we need to specify some generic CSS rules which allow our container to adapt its dimensions to the current viewport size. Further, we also need to add a rule which makes our image scale automatically.
#container {
margin: 2em auto;
max-width: 960px;
}
#container img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
Opening the page with Safari Mobile is almost without surprises:
The next step is to test our CSS solution with a wider image, in this case a 400 X 299 JPEG file:
<div id="container">
<img src="img/image-400.jpg" alt="" />
</div>
Resizing the browser's viewport to the given resolution on Google Chrome desktop is an interesting comparison:
Our test is confirmed by Safari Mobile:
What happens with higher resolution images, for example a 1024 X 768 image? In this case you should proceed as follows:
- Start with the lowest resolution available (e.g. 320 ).
- Adjust the height of the image according to its current width to prevent browsers from deforming the image.
Point two is tricky. With Media Queries you can either perform a rough approximation or specify a proportional height:
@media only screen and (max-width: 320px) {
#container img {
display: block;
margin: 0 auto;
max-width: 100%;
height: 240px; /* 1024 X 768 */
}
}
This solution falls short when you can't know in advance the original resolution of a given image. In this case you can use JavaScript after adding
the original dimensions to the img element:
<div id="container">
<img src="img/image.jpg" alt="" data-width="1024" data-height="768" />
</div>
Then you can resize image proportionally with JavaScript or even use attribute selectors together with Media Queries:
@media only screen and (max-width: 320px) {
#container img[data-width="1024"] {
height: 240px; /* 1024 X 768 */
}
#container img[data-width="1440"] {
height: 215px; /* 1440 X 968 */
}
}
I'd like to say that a pure CSS solution is always preferable but sometimes JavaScript turns out to be the best client-side solution in many cases.
