How to size inline images E.g. screenshots in product description

Question

I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images. Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.

My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...). I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?

Thanks.

Answer 1

You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.

When adding an new image, choose a class that fit your need.

If you need more precision, create a set of 10 class instead of 5 ! Edit : as promised, the code :

.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}

So the image :

<img class="size2" src="..." />

will be 20% wide.