I have a website about products. Each product article has text and some images in it. The images range from 400px width to some going up to 700px width. The product article is stored in a SQL Server database and the article is fetched dynamically based on the productid.

I am using Bootstrap to make my website mobile friendly. I have a two column layout. The product article is contained in a Div marked with a 

```
 class="col-md-12 row"

```

When I shrink the size of the page to preview how it would look in a mobile device the text nicely adjusts itself, however the images don't. Now i have about 3000 such images and if there is an attribute that I have to apply to every individual image tag, that won't be feasible.

Is there any other way using CSS or bootstrap or javascript where I can reduce the size of the image for a device size, keeping the image aspect ratio intact ?