bootstrap如何使固定的高度响应？ [英] bootstrap how to make a fixed height responsive?

问题描述

如何使用bootstrap 3制作固定高度的元素？例如，我将carousal的高度设置为650px。但是我不能像图片那样让它响应。任何想法？

css，

 ＃article-carousel .carousel -inner {
 height：650px; 
} 
  

html，

 <！ -  Carousel items  - > 
< div class =carousel-inner> 
 
< div class =活动项目> 
 < / div> 
 .... 
  

对象

-fit 用于调整图片大小 http://jsfiddle.net/xcoq9xxg/

  img {
 height：650px; 
宽度：100％; 
 object-fit：cover; // here 
} 
  

适用于Chrome和Opera。为他人使用polyfill库： https://github.com/schmidsi/jquery-object-fit或 https://github.com/anselmh/object-fit 。

---

另一种方法是使用css3 background-size http://jsfiddle.net/dizel3d/rwdspudv/

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

它适用于所有不带javascript的现代浏览器，但您需要使用而不是< img> ：



 < div class =imagestyle =background-image：url（'my-image.jpg'）>< / div> 
  




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>
....

解决方案

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>

这篇关于bootstrap如何使固定的高度响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！