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.


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.

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.

display: block;
width: auto;
max-width: 75%;


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.

10 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!!!

  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

  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.

  5. Pingback: xxx553.xyz

  6. Pingback: sex363.xyz

Leave a Reply

Your email address will not be published.