Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap how to make a fixed height responsive?

How can I make a fixed height element responsive with bootstrap 3? For instance I set the carousal's height at 650px. But I can't make it responsive like the images do. Any idea?

css,

#article-carousel .carousel-inner{
    height:650px;
}

html,

<!-- Carousel items -->
<div class="carousel-inner">

   <div class="active item">
     <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
   </div>
....

enter image description here

like image 592
Run Avatar asked Sep 22 '14 18:09

Run


People also ask

How can I fix the height of a container in Bootstrap?

Width and Height Utilities The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.

How do you build a full height container?

height:100vh box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.

Is Bootstrap completely responsive?

Grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

How do I change the height of an image in Bootstrap?

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.


3 Answers

i had the same problem with the responsive fixed height. I use vh instead of px. In my case it works like a charm

img {
    height: 85vh;
    width: 100%;
    object-fit: cover; // here
}
like image 77
Nadine Fisch Avatar answered Oct 12 '22 23:10

Nadine Fisch


You can use css3 object-fit for resizing your image http://jsfiddle.net/xcoq9xxg/

img {
    height: 650px;
    width: 100%;
    object-fit: cover; // here
}

It works for Chrome and Opera. Use polyfill library for others: https://github.com/schmidsi/jquery-object-fit or https://github.com/anselmh/object-fit.


Another way is to use css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/

.image {
    height: 650px;
    background-position: center;
    background-size: cover;
}

It works in all modern browsers without javascript, but you need to use <div> instead of <img>:

<div class="image" style="background-image: url('my-image.jpg')"></div>
like image 39
dizel3d Avatar answered Oct 12 '22 23:10

dizel3d


Try below this worked just fine for me

<style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 500px;
      height: 350px;
  }
  .carousel
  {
  	height: 350px;
    width: 500px
  }
  </style>
like image 20
user1370510 Avatar answered Oct 12 '22 22:10

user1370510