Adjusting and image size to fit a div with Bootstrap

Question

I'm trying to get an image to fit within a specific size div. Unfortunately, the image isn't conforming to it and is instead proportionally shrinking to a size that isn't big enough. I'm not sure what the best way is to go about getting the image to fit inside it is.

If this isn't enough code, I'd be happy to supply more, and I'm open to fixing any other errors that I am overlooking.

Here is the HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

My CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

I have posted an Answer to a similar question here: https://stackoverflow.com/questions/41870216/bootstrap-4-img-fluid-does-not-change-image-height/60279806#60279806 — FredyWenger, Feb 18 '20 at 11:39

score 221 · Answer 1 · edited Dec 05 '19 at 23:12

221

Try this way:

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

UPDATE:

In Bootstrap 4 img-responsive becomes img-fluid, so the solution using Bootstrap 4 is:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

edited Dec 05 '19 at 23:12

Dustin Ingram

20,502
7
59
82

answered May 15 '15 at 06:19

Shafeeque S

2,533
3
15
19

6

Cool! class="img-responsive" helped. Perhaps this should be the accepted answer today. – Anupam Mar 18 '17 at 07:30
1

class="img-responsive" is definetely the way to go! This should be the accepted answer. – iMobaio Jul 12 '17 at 08:25

jterry · Accepted Answer · 2013-05-09T16:26:39.960

63

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

edited May 09 '13 at 16:26

answered May 09 '13 at 16:13

jterry

6,209
2
30
36

I looked into doing that, unfortunately like you said, the results aren't the best. Ideally, I'd like the images to be shrunk down so that the height of the image fits the height of the div, and the width of the image that exceeds the width of the constraining div would be hidden. If that makes sence – smilefreak24 May 09 '13 at 16:19
The OTHER answer is the best one, simply adding class="img-responsive" to the img tag does the trick! – iMobaio Jul 12 '17 at 08:26
1

better from `width:100%;` is `max-width:100%;` and better all them is class `img-responsive` in BS3 or `img-fluid` in BS4. – Nabi K.A.Z. Dec 18 '17 at 19:08

score 62 · Answer 3 · edited Apr 26 '17 at 03:22

62

Just a heads up that Bootstrap 4 now uses img-fluid instead of img-responsive, so double check which version you're using if you're having problems.

edited Apr 26 '17 at 03:22

Nathan Tuggy

2,237
27
30
38

answered Apr 26 '17 at 02:44

Alex

721
5
3

4

`img-fluid` does it ! Thanks ! – pyano Sep 05 '17 at 18:48

score 36 · Answer 4 · edited Apr 19 '18 at 15:44

36

Simply add the class img-responsive to your img tag, it is applicable in bootstrap 3 onward!

edited Apr 19 '18 at 15:44

Dave Jarvis

30,436
41
178
315

answered Mar 11 '16 at 10:18

Shashi

700
1
7
15

Sorry but Can you please be specific ,I'm not getting your question properly ,Thank you ! – Shashi Jul 05 '17 at 15:14

score 8 · Answer 5 · answered Apr 19 '18 at 03:26

8

I used this and works for me.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

answered Apr 19 '18 at 03:26

Alan Arturo Hernández Chichitz

314
3
9

score 7 · Answer 6 · answered Oct 29 '15 at 03:07

7

I had this same problem and stumbled upon the following simple solution. Just add a bit of padding to the image and it resizes itself to fit within the div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

answered Oct 29 '15 at 03:07

wiltonio

121
2
5

1

Solved WITH Bootstrap rather than custom CSS. Thank you. – mattgreen Feb 26 '16 at 18:06

score 6 · Answer 7 · answered Sep 12 '18 at 04:17

6

If any of you looking for Bootstrap-4. Here it is

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

answered Sep 12 '18 at 04:17

Dexter

7,911
4
41
40

this is not the ideal solution if you have another column with text in it as it will also be hard up against the edge of the border – James Burke Feb 17 '19 at 19:55

score 2 · Answer 8 · edited Jul 02 '16 at 23:27

2

Most of the time,bootstrap project uses jQuery, so you can use jQuery.

Just get the width and height of parent with JQuery.offsetHeight() and JQuery.offsetWidth(), and set them to the child element with JQuery.width() and JQuery.height().

If you want to make it responsive, repeat the above steps in the $(window).resize(func), as well.

edited Jul 02 '16 at 23:27

Michael Gaskill

7,913
10
38
43

answered Jul 02 '16 at 23:04

Mohsen

21
1

Adjusting and image size to fit a div with Bootstrap

8 Answers8

Linked

Related