Use CSS to override an image’s width and height attributes

In the days of responsive web design using an image’s width and height attributes is generally not a good idea — it's much better to leave this to the CSS. To ensure these aren’t used set the width and height of the image to auto.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Image text</title>
        <style type="text/css" media="all">

            img.ignore-attributes {

                width: auto;
                height: auto;

            }

        </style>
    </head>
    <body>
        <p>
            <!-- Shows at 200 x 100 -->
            <img width="200" height="100" src="image.jpg" alt="" />
        </p>
        <p>
            <!-- Shows at native width and height -->
            <img class="ignore-attributes" width="200" height="100" src="image.jpg" alt="" />
        </p>
    </body>
</html>

How-tos

Tim Bennett is a Leeds-based web designer from Yorkshire. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.