• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 120
  • Last Modified:

Responsive design best practice for images

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
intoxicated_curveball
Asked:
intoxicated_curveball
1 Solution
 
Tom BeckCommented:
In addition to defining width:100%, also set a max-width for images.
0
 
intoxicated_curveballAuthor Commented:
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
 
Tom BeckCommented:
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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
intoxicated_curveballAuthor Commented:
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
 
Tom BeckCommented:
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
 
David S.Commented:
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
 
Mikkel SandbergFront End DeveloperCommented:
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
 
intoxicated_curveballAuthor Commented:
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
 
Tom BeckCommented:
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
 
intoxicated_curveballAuthor Commented:
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
 
Tom BeckCommented:
Thanks.
Are you using the HTML5 doctype or something older?
0
 
Tom BeckCommented:
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
 
intoxicated_curveballAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now