bootstrap responsive img but change image height and width

Question

my header is .png image and I gave it the class="responsive-img" but the header looks big .. how to change the height and width but keep it smaller?

Solution

Bootstrap 4 & 5

Since Bootstrap 4, a few new classes regarding images have been introduced.

Responsive images are now .img-fluid

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

example:

<img src="..." class="img-fluid" alt="Responsive image">

What does img-fluid do?

.img-fluid {
  max-width: 100%;
  height: auto;
}

Images used as thumbnails are .img-thumbnail

---

Pre-bootstrap 4

First off it's class="img-responsive" and not class="responsive-img"

That class itself won't get you far since it only does this:

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

I recommend you overwrite the class and add the specifics of what you want. If you only want to change the height and width (and keep it responsive and smaller), here is a basic example:

.img-responsive {
  max-width: 90%; /* or to whatever you want here */
  max-height: auto; /* or to whatever you want here */
}

Touching the height will deform your responsive image (unless that is what you want), so I recommend you play with the max-width. Try adding a min-width as well.

Media Queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

This essentially allows you to adapt your images on various devices, however there may be an overwhelming amount and picking general cases may be preferred.

/* target devices with small screens usually mobile devices */
@media screen and (max-width: 479px) {
  image {
    margin: 0;
  }
}