CSS Create A Scalable Image Class

Here’s a simple way to scale images in your responsive web design using CSS, two classes and some html.

The CSS

I created two classes one named .image-wrapper and the other I named .scale-image.

First, lets create the two classes. We will name the first one .image-wrapper and this will be used as a div.

.image-wrapper
{
position: relative;
}

Next we will make the .scale-image class. This class will scale the image inside the image-wrapper div. You can play around with the max-width percentage based on your design.

.scale-image
{
display: block;
width: auto;
max-width: 75%;
}

The HTML

Place the image code inside the div of the image wrapper you created and then use the scale-image class to scale the image based on the device or browser size.

<div class="image-wrapper">
<img src="image_name.jpg" class="scale-image" />
<div />

That’s it your done. If you want to see the code in use you can check out a clients site I’m doing here.

8 thoughts on “CSS Create A Scalable Image Class

  1. Ryan

    Yo…I have been trying for about four days to make this scaling thing happen, and I was about ready to rip my hair out. I cannot tell you how frustrated I was and how many hours I wasted simply trying to get my logo to be scalable (in 2014, kids!). Therefore, here is an ENORMOUS virtual basket of THANKS, and if I knew you I would probably bake you a pie or something for the relief and the good night’s sleep I know I shall be getting tonight. Thank you so much!!!

    Reply
  2. Pingback: Scalable Images | L'estetica Iudiciani

  3. Armand

    Hello there, You have done an incredible job.
    I will definitely digg it and personally suggest to my
    friends. I am sure they’ll be benefited from this web
    site.

    Reply
  4. NewAeon Post author

    Sorry for the late reply. I haven’t been posting here as much as I should and this is the first time I’ve logged into the account for many months. Anyway, the html goes in the html file. I used a stylesheet for the css and then just use a div with the image-wrapper class in your html.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>