Solved

Responsive design best practice for images

Posted on 2015-01-13
13
105 Views
Last Modified: 2015-01-14
We are making our site responsive design. The site already contains thousands of pages so it's a matter of ensuring all the existing content will scale properly when adjusting the browser width (or device size).

One issue I'm having is with image extending past the page width. For example, lets say "###" represents the image and the "|" represents the page borders.

Wide layout (OK):
|###   |
|###   |

Regular layout (OK):
|###|
|###|

Small layout (Not OK):
|##|#
|##|#

As you can see above, the image extends past the page in the "small layout". In theory this is fixable by using the following CSS on the image: max-width: 100%. That works in Chrome and Safari but not IE and Firefox.

I've researched this issue and most say to use CSS: width: 100%. This somewhat works but it also stretches the images beyond the native resolution in wider layouts.

So how can I ensure the image width never scales beyond the page width and never goes larger then it's native resolution?
0
Comment
Question by:intoxicated_curveball
13 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40547667
In addition to defining width:100%, also set a max-width for images.
0
 

Author Comment

by:intoxicated_curveball
ID: 40547720
Hi Tom, width: 100% doesn't actually work because it scales the images larger then their native resolution... So if I have an image that is 640px wide it will not look good in browser width beyond 640px.

Max-width: 100% works in Chrome and Safari because it keeps the native resolution until the browser width is less then that, then it starts scaling it down.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40547743
You don't want max-width:100%.

Set max-width:640px AND width:100%. The images will scale down on smaller screens and never get larger than 640px, their native resolution, on larger screens.
0
 

Author Comment

by:intoxicated_curveball
ID: 40547791
Tom: That is a solution down to a single image however not on a global scale. As I said our site contains thousands of pages, and thousand of images, images of varying dimensions, it's not possible to go in and set 'max-width' for every single image of varying resolutions.

Though perhaps with jQuery I could do this, but I'd prefer a solution that does not require jQuery or Javascript.

By the way max-width: 100% does work in Chrome and Safari, so it's too bad it doesn't work in the other browsers.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40547943
In that case, max-width:100% is your best option short of editing thousands of image tags. It works in Firefox, Safari and Chrome on my system. I cannot test IE, but I suspect there's a workaround. Possibly there's a another style being set that breaks it. I've read that having position:absolute set could be an issue with max-width:100% in IE.
0
 
LVL 42

Expert Comment

by:David S.
ID: 40548414
It sounds like the width and height attributes were set on the <img> elements. Try using height:auto with max-width:100%

Since you mentioned best practices, for new projects you might want to consider using the srcset attribute or the picture element.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 40549302
Since you mentioned best practices, for new projects you might want to consider using the srcset attribute or the picture element.

I haven't heard of this before, but that looks really cool! Unfortunately it looks like it's not supported by all browsers yet :/

The fact that it works in webkit browsers (Chrome and Safari) but not in IE and Firefox makes me think that you may be using some styling on the images that is not supported by them without vendor prefixes (-moz- and -ms- in this case).
0
 

Author Comment

by:intoxicated_curveball
ID: 40549563
Hi Tom and Kravmir, that's interesting because it's not working fully in Firefox for me. I am using max-width: 100% and height: auto; but In firefox it's not working (it simply stays the same size even when reducing the browser width). Perhaps you can share your base code with me? I'm not using absolute positioning by the way.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40549620
My test was as simple as it gets. Works in Firefox v34 and v35 on my Mac as well as Chrome and Safari. Adding height:auto is not necessary because that's the default style when height is not specified.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style>
img {
	max-width:100%
}
</style>
</head>
<body>
<img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/clown-fish_500_600x450.jpg" alt="" />
</body>
</html>

Open in new window

0
 

Author Comment

by:intoxicated_curveball
ID: 40549635
Tom, thanks!... it looks like I had the solution all along. Your code is working in both my Firefox (PC) and IE... so I just need to figure out why it's not working in my code which will be a process of elimination. I will accept yours as the solution since you helped me trouble-shoot.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40549657
Thanks.
Are you using the HTML5 doctype or something older?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40549674
I managed to recreate your problem in IE v8 on an old XP machine by removing the doctype from the top of the test page. Tried two other doctypes, XHTML Traditional and HTML Strict, but it still worked.
0
 

Author Comment

by:intoxicated_curveball
ID: 40549735
I found the issue :) It was a wrapping div with the style set as display: table (was being used as a clear fix). When I set the display to 'block' instead it works fine.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now