[英]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="active item">
<img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/>
</div>
....
您可以使用 css3 object-fit調整圖像大小http://jsfiddle.net/xcoq9xxg/
img {
height: 650px;
width: 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 的現代瀏覽器,但您需要使用<div>
而不是<img>
:
<div class="image" style="background-image: url('my-image.jpg')"></div>
我對響應式固定高度有同樣的問題。 我使用 vh 而不是 px。 在我的情況下,它就像一個魅力
img {
height: 85vh;
width: 100%;
object-fit: cover; // here
}
嘗試 :
.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }
或者,我認為最好使用 js(使用 boostrap 我們將使用 jquery):
...
function init_carousel(){
H = +($( window ).height()); // or $('.carousel-inner') as you want ...
$('.img-responsive').css('height',H+'px');
}
init_carousel();
...
在這種情況下,將帶有背景圖像的 div 添加到其中,並且您的 css 必須是:
.carousel-inner > item { position: relative; overflow:hidden; }
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; }
.carousel-inner > item > .img-responsive { witdh:auto; }
試試下面這對我來說很好用
<style> /* Make the image fully responsive */ .carousel-inner img { width: 500px; height: 350px; } .carousel { height: 350px; width: 500px } </style>
function Screensize() {
try {
var height = ((screen.height * 80) / 100);
document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;");
}
catch (ex)
{ alert(ex); }
}
您將需要使用媒體查詢重新設計 carousel-control 類的樣式,這里只是要添加的示例代碼
@media (max-width: 800px) {
.carousel-control{
height:350px;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.