Images for different screen widths

Mobile
1

Hi - I need a box that contains a 728px banner on a computer screen, but displays as a 300px banner in mobile.

How do I say to the browser - display this image if screen is 800px or
wider, BUT display this image if screen is narrower than 800px?

thanks! - Val

2

Take a look at this article.

3

Or depending on the image and dynamics of the page you could just scale the image smaller.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style>
body{padding:20px;}
.banner{
	max-width:728px;
	min-width:300px;
	margin:auto;	
}
.banner img{width:100%;height:auto;}
</style>
</head>
<body>
<div class="banner">
<img src="http://placehold.it/728x300">
</div>
</body>
</html>

It depends on how the image looks scaled but it’s the easiest solution.

You could use background images and use media queries to supply the different images at different widths but then you may end up with some users having to download 2 images instead of one.

4

Thank you Sam & Paul!

5

The two methods to choose would depend on the reason you want to do this.
Paul’s solution is for responsiveness, to make the same image stretch or compress along with the view window. This is something you really should be doing anyway, so do do that if you are not already.
The method I linked to is mainly for the purpose of saving bandwidth, so as not to dish out big hi-res images to small screens. Typically you would have different size versions of the same image, but potentially they could be different images. For example, different versions of a logo with a different aspect/layout to better fit a re-arranged page layout.
Of course its not a choice between the two methods, they can be used together.

6

Yes I didn’t mean as a sole alternative :smile:

7

Hi Paul - good to see you again :slight_smile: I’m back because google mobigeddon is complaining that the sexy dropdown btm menu you did for me is too small for mobile fingers! So am starting from scratch again!

I’m guessing your solution is better to use than this more complicated one? given here - http://www.sitepoint.com/community/t/responsive-floating-boxes/189399/3:

css:
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;}

img {display:block; border:2px solid magenta; /* TEST Border */
    max-width:100%; /* scales from actual image width smaller */
    /* width:100%; /* scales larger and smaller than actual image width */
    height:auto; /* aspect ratio is respected */
    margin:0 auto;}

html:
<div><img src="http://placehold.it/960x200"></div>

thanks! Val

8

Max-width on images is buggy in IE8 which is why I always max-width the image container instead and then the image can be width:100% and height:auto.

It all depends on situation.

Hover menus are not very accessible to touch anyway and you would be better off having a click menu instead or finding another way to present the options. For mobile small links are not very easy to use so you do need to enlarge important items.

9

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