How to deal with narrow rectangular images on mobile?

HTML & CSS
1

I’m wanting to add a banner on the mobile version of my site.

Like a 375x50 retangular.

But when the mobile is turned or changes orientation for example to 667px width the image stretches and blurs.

So I think I need seperate images for different screen orientations?

I was wondering how to handle these narrower images?

2

You could just use an image with sufficient resolution, if you know what size that is. Then css can scale it for smaller screens.

Otherwise you are into using <picture> elements and srcset attributes which may be overkill unless you are changing the image drastically in size content or aspect.

3

I was reading about the element but it was an old article and it recommended using javascript with it .

It’s just that the height of the image scales to big when one changes the orientation on the device.

4

If simply scaling the image does not give the desired results and you need to swap it out for a totally different banner with a different aspect, then picture is the tool for that. It should not require any javascript, maybe it was a polyfill.

5

Hi there Freejoy,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#banner {
    display: block;
    width: 98%;
    max-width: 375px;
    margin: auto;
 }
</style>

</head>
<body> 

 <img id="banner" src="http://placehold.it/375x50" alt="banner">

</body>
</html>

coothead

1 Like
6

It sounds like you are not maintaining the aspect ratio of the image?

If you stretch one dimension of an image then the other dimension needs to be auto. You can’t change an image from 375 to 675px width and still keep the height to 50px. That would just stretch the image and look wrong.

You could use object- fit to make the image keep its aspect ratio while keeping your 50px height but is not supported in older browsers. It’s probably easier just to use a background image and use background-size:cover instead. In that way you can stretch the width and also maintain a set height. Of course this means the image will be scaled until the background is filled so you will lose some detail at the edges.

The above assumes that you do want to enlarge the image on wider screens.

7

Yes, I think it was polyfill.js

I was just looking at Amazon and it appears they use a large image big enough for the 667px screen size then scale it down to the smaller sizes.

I thought that might slow things down but I guess that’s how Amazon does it.

8

Yes, that’s the simplest approach, as per my first suggestion. An image that size should not be a real bandwidth hog if using appropriate compression.
In fact, if it’s orientation driven, that’s probably more efficient, as a user could change that and end up having to load both images.

9

I wasn’t sure how it was done. Thanks

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.