Max-Width for all browsers

Two different approaches

2009 March, 8th

Uses for maximum width

Maximum width is great when you need to make sure images does not go over a certain size, or you need scalable containers or website design.

Approach 1: Using CSS

First you need to set the max-width CSS property for the container or image you want the width limited. If it is an image you need to target it directly like this:

      .container img {
        max-width: 400px
       }

To get this to also work in IE6 you need to add an expression beneath:

      .container img {
        max-width: 400px
        width: expression(this.width > 400 ? 400: true);
       }

Expressions is ignored by all other browsers than IE6, but if you have a seperate stylesheet for IE hacks (ex. iehacks.css) you can also move the expression there, and you can also use the "star html"-hack to target only IE6:

       * html .container img {
         width: expression(this.width > 400 ? 400: true);
       }

The expression simly sets the width to 400 pixels if the image width is larger than 400 pixels, but does nothing if it is below or equal.

Syntax: expression(expression-to-evaluate ? value-if-true : value-if-false);

This is an inline programming statement and is usually used in CSS instead of the longer variant over several lines:

      if(this.width > 400)
        width: 400;
      else
        //do nothing

This method can also be applied to the max-height, min-width and min-height CSS property, by changing it a little.

Approach 2: Using jQuery

Sometimes the above solution does not work like expected, or you already have some jQuery code that does other things on your website. I experienced that, and found out it also can be done quite nice with jQuery / JavaScript instead. The downside is that it do not work if the user have disabled JavaScript.

The only thing you need is to include the following code in <head> of your HTML-file or PHP-template:

      <script type="text/javascript" src="/path/to/jquery.js">
      </script>

      <script type="text/javascript">

       $(document).ready(function(){

          $("div.container img").each(function() {

           //Get the width of the image
           var width = $(this).width();

           //Max-width substitution (works for all browsers)
           if (width > 400) {
             $(this).css("width", "400px");
           }

         });

       });

      </script>

The code goes through each <img>-element that resides in a <div> with class="container". Then it parses the width of the image, and if it is over 400px it is set to 400px with CSS.

You can also use $("img").each to target all images on the website.

Thats's it! The max-width dragon have been slayed..

If you want to learn more in depth about the max-width CSS property and getting it to work in IE6, take a look at some of the blogposts under: