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.
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.
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.
<img src="image_name.jpg" class="scale-image" />
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.