CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
offtheradar
offtheradar

Reputation: 35

Img-fluid is not scaling png when used directly inside .col

I'm using the code below with Bootstrap 4.1.3 and the my image is not scaling up to the height of the row. Can anyone tell me what I have wrong here.

<div class="container">
    <div class="row top-logo">
        <div class="col text-center"><img src="logo.png" class="img-fluid"></div>
    </div>
</div>

css is:

.top-logo {
height: 200px;
}

My logo image is a 100x100 png.

Upvotes: 1

Views: 1039

Answers (2)

mostafa rastegar
mostafa rastegar

Reputation: 51

.img-fluid height is "auto". for scale img by height:auto you should set a width for img

.top-logo img{
  height: auto;
  width:100%;
  max-width:200px;
}

or 

.top-logo img{
  height: 100%;
  width:auto;
  /*max-width:200px;*/
}

Upvotes: 1

Yossy Winata
Yossy Winata

Reputation: 26

I am not a CSS expert so I am sorry if I cannot give you the best explanation. The img-fluid has height: auto property behind it but somehow it does not work. However, height: 100% does the trick. Bootstrap has h-100 class to do this. Try adding this to your image class.

<img src="logo.png" class="img-fluid h-100">

Upvotes: 1

Related Questions