How can images be resized using Bootstrap

Question

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 ?

Answer 1

Just add this somewhere in your stylesheet and it will apply to all images on your site.

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Answer 2

Bootstrap v3 and below.

Use class="img-responsive" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class.

Ex: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h

Bootstrap v4

Use class="img-fluid" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class. see comment below for more details

Answer 3

Try to this.

<div class="row">
<div class="col-md-4">
    <img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>