1

I'm trying to make the img in my bootstrap carousel responsive. I tried changing the height and width in the css but it doesnt seems to work. I want the height to be 100vh and the width to whatever the img's width is. The overflow part can be hidden but the img has to be to scale. Right now it looks like this when the screen is smaller. enter image description here

Here's the code. 

@media only screen and (max-width : 768px) {
        .carousel-inner > .item > img {
                height: 100vh;
                width: auto;
                overflow: hidden;
        }
}
<div class="carousel-inner" role="listbox">
     <div class="item active">
         <img src="photos/JO2_2978.JPG" alt="xmas_orchestra">
     </div>
</div>
Chicky Egg
  • 143
  • 2
  • 5
  • 13

1 Answers1

0

If you are only concerned about the height being fit to the viewport then just set the height and not the width and it works fine.

Bear in mind that you have this code wrapped in a @media query meaning these styles are only applied when the query conditions are met.

.carousel-inner > .item > img {
                height: 100vh;
                //width: auto;
                overflow: hidden;
        }
<div class="carousel-inner" role="listbox">
     <div class="item active">
         <img src="https://images.unsplash.com/photo-1487772841463-eb1f383a9e67?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="xmas_orchestra">
     </div>
</div>
Brad
  • 8,044
  • 10
  • 39
  • 50