Bootstrap Responsive Images Scaling

Scaling an image with bootstrap

You need to add the class img-responsive to the image tag.

It's documented under Images on the Bootstrap website

http://getbootstrap.com/css/#images

<div class="col-md-1">
    <img class="img-responsive" src="1.jpg" />
</div>

How to make an image responsive using bootstrap without having it take up the entire width of the division?

You can put the image in a wrapper and give the wrapper the width you want the image to have.
HTML

<div class="imgwrapper">
   <img src="img.jpg" class="img-responsive">
</div>

CSS

.imgwrapper {
   width: 80%;
}

The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.

If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.

How can images be resized using Bootstrap

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;
}

Resize image with bootstrap

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.

This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Your Problem is, that the container of the image has no fixed width, so it will scale to max-width: 100% resulting in the big picture.

Another problem is, that your nav has no fixed height, so your logo will be sized leaving it as big as it is, and scaling your header.

You need to atleast define the size of your header, and all childern below the header, to use h-100 on your image and all its parents, or size your parent of your image in a specific width, so that image-responsive can be used.

BOOTSTRAP can only resize your images responsively if you tell it, how big it can be at max.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color: #bc001d; height: 50px;">  <div class="nav_container h-100">    <a class="navbar-brand h-100" href="/">      <img id="logo-image" class="h-100" alt="Logo" src="https://dummyimage.com/200x200" /></a>  </div></nav>

Adjusting and image size to fit a div with Bootstrap

You can explicitly define the width and height of images, but the results may not be the best looking.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

---

...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

Down-scale Responsive Image Resize Bootstrap

The problem was that had to remove the class definitions for carousel-item and the animation elements because they were treating the imgs as flex elements. Added the following to my style.css:

.carousel-item{}

.carousel-item-next, .carousel-item-prev, .carousel-item.active
{
    display:block;
}

Twitter Bootstrap responsive images with different sizes resizing unproportionaly

Try with :

.imageClip{
    width:30%;
    height: auto;
    overflow:hidden;
}

It will keep proportion and will be responsive. (I put 30% as default, feel free to adapt it)

Responsive large image in bootstrap

Works nicely:

getbootstrap.com/css/#overview-responsive-images

Responsive images Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.
This applies max-width: 100%; and height: auto; to the image so that
it scales nicely to the parent element.

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

---

Related Topics