Bootstrap傳送帶的寬度和高度

我試圖做一個全幅圖像（寬度：100％）和一個固定高度的引導傳送帶，但如果我將寬度設置爲100％，自動高度也取100％Bootstrap傳送帶的寬度和高度

我不知道問題出在我的文件

<div id="myCarousel" class="carousel slide"> 
<ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
    <div class="active item"> 
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %> 
    </div> 
    <div class="item"> 
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %> 
    </div> 
    <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %> 
    </div> 
</div> 
<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

和我的CSS文件

.tales { 
    width: 100%; 
    height: 200px; 
}

來源

2013-10-20 Jorman Bustos

你想讓它響應嗎？如果你是那麼我只想提出以下建議：

.tales { 
    width: 100%; 
} 
.carousel-inner{ 
    width:100%; 
    max-height: 200px !important; 
}

然而，最好的方式來響應處理，這將是通利用媒體查詢，像這樣：

/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width: 959px) {} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) {} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) {} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) {}

來源

2013-10-20 18:54:46

@ Eduro謝謝你的回答。我正面臨着以下問題，幻燈片中缺少字幕。使用1920 x 1080大小的圖像和完整圖像不可見。 – LearNer

嗨，我有同樣的問題，

我的身高改變到原來的高度，而我的幻燈片被動畫到左邊，（在響應網站）

，所以我用CSS固定它只：

.carousel .item.left img{ 
    width: 100% !important; 
}

來源

2015-01-14 14:09:12

我知道這是一個較舊的帖子，但Bootstrap仍然活着並踢！

略有不同，@愛德華多的帖子，我不得不修改：

#myCarousel.carousel.slide { 
    width: 100%; 
    max-width: 400px; !important 
}

當我只修改了.carousel-inner {}，實際圖像是固定的大小，但左/右控制被錯誤地顯示關閉到的一側div。

來源

2015-07-24 04:27:35 rws

我建議引導3

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    min-height: 500px; /* Set slide height here */ 

}

來源

2015-11-17 21:51:14 Chuck

延伸圖像...： -/ – Zeth

如果您的所有圖像具有相同的尺寸並且您使用了確切的尺寸，則它可以正常工作。 – Chuck

使用'max-height'而不是'min-height' –

下如果使用引導4 Alpha和你有在Chrome中圖像的高度的錯誤，我有一個解決方案：引導的文檔4這樣說：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img class="d-block img-fluid" src="..." alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="..." alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="..." alt="Third slide"> 
    </div> 
    </div> 
</div>

解決方案：

解決的辦法是把「格」的圖像周圍，與類「.container」，像這樣：

<div class="carousel-item active"> 
    <div class="container"> 
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid"> 
    </div> 
</div>

來源

2017-02-09 17:04:24 hugotom

-1

只是把HEIGHT = 「400像素」爲圖像屬性一樣

<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">

來源

2018-01-20 22:10:23

您不需要將單位放在'height'或'width'屬性中。 –

好的，我會這樣做的 –

Bootstrap傳送帶的寬度和高度

回答

相關問題