Twitter Bootstrap具有覆蓋響應圖像的旋轉木馬

我試圖找到一種方法讓Twitter響應引導程序覆蓋旋轉木馬上的「響應」圖像。Twitter Bootstrap具有覆蓋響應圖像的旋轉木馬

我發現How do i add a mask on top of a bootstrap element?這讓我與覆蓋 - 但是當我將圖像添加到該分區，它並不像調整的旋轉木馬。

從我的引導讀取的圖像已經max-width:100% - 這是否意味着必須設置覆蓋DIV的寬度？

小提琴：http://jsfiddle.net/CF8m8/ - 更改結果窗口的寬度明白我的意思。

感謝您的幫助。

來源

2013-02-24 nubje

你想要重疊的大小以及？ – Shail 2013-02-25 02:38:46

@海爾：謝謝你的回覆。嗯，是的，我想調整覆蓋圖內的圖像，所以它適合旋轉木馬的「內部」。 – nubje 2013-02-25 06:50:40

，你可以做到以下幾點：的jsfiddle Jsfiddle with resized overlay

的jsfiddle在瀏覽器check in browser

編輯：我建議你使用圖像的大小不同，以滿足不同的屏幕，這樣你不會失去的質量，甚至這個比例可以根據您的選擇來確定。比用媒體查詢加載這些圖像，所以每個不同的屏幕，你服務他們調整大小的圖像，這將適合你carousal。

<div class="container"> 
<div class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="overlay"></div> 
    <div class="item active"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=One" /></a> 
    </div> 
    <div class="item"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=Two" /></a> 
    </div> 
    <div class="item"> 
     <a href=""><img src="http://www.placehold.it/900x500&text=Three" /></a> 
    </div> 
</div> 
<a class="carousel-control left" href=".carousel" data-slide="prev">‹</a> 
<a class="carousel-control right" href=".carousel" data-slide="next">›</a> 
    </div> 
</div>

在CSS中使用下列內容：

.overlay { 
background: url(http://lorempixel.com/310/310/cats/) top left no-repeat; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 10; 
pointer-events: none; 
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
     .overlay{ 

     width:50%; 
     height:50%; 
    }  
} 

    @media (max-width: 767px) { 
    .overlay{ 

    width:50%; 
    height:50%; 
    } 

    } 
@media (max-width: 480px) { 
    .overlay{ 
    width:50%; 
    height:50%; 

    } 
}

來源

2013-02-25 08:03:06 Shail

謝謝！這就是我所追求的，但是有什麼辦法讓它調整圖像大小，保持縱橫比，而不是剪裁它？這是一個標誌 - 不知道是否是最好的做法來調整它 - 但也許我更好地創建圖像的新版本。 – nubje 2013-02-25 12:11:23

它會被裁剪，因爲我們將它調整到一個異常的級別，優化的圖像將表現得更加正確。我已經向你展示瞭如何做到這一點。你可以做的另一個wwat是創建不同尺寸的圖像來服務於不同的屏幕尺寸，並將它們插入到我上面所寫的查詢中，這樣可以控制尺寸和質量。讓我知道如果你需要更多的幫助 – Shail 2013-02-25 12:17:18

你是什麼意思的「優化圖像」？從我的嘗試中，旋轉木馬會被調整大小而不會被裁剪，所以如果疊加層的表現可能是完美的。我也嘗試過不同大小的圖像，但有很多媒體查詢要做:) – nubje 2013-02-25 17:11:35

我認爲這是一個更好的解決方案。 @Shail。我將使用你自己的例子。

向div = overlay添加如下所示的圖像，並添加「圖像響應」類。然後bootstrap會照顧其餘的。

<div class="overlay"> 
<img src="images/slideshowfx.png" class="image-responsive"/> 
</div>

我使用的大小寬度=「1200像素」和高度=「300像素（你想或任何高度）」

去除不需要的風格後，CSS會是這樣。

.overlay { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 10; 
}

這就是你需要做的一切。您可以消除所有其他不必要的CSS樣式。

來源

2013-08-05 03:06:36

最好的辦法是讓您的圖片在沒有媒體查詢的情況下調整大小，這樣做的目的就是爲您的圖片提供一類「img-responsive」。

Bootstrap已經構建了必要的媒體查詢，並且可以縮放您的圖片。請記住，對圖像所在的容器沒有固定的高度，否則縮小比例只會影響寬度，因爲您的固定高度可能會覆蓋之前用於縮放高度的css。

至於上面已經充分回答的覆蓋部分。

來源

2015-10-01 22:44:06

Twitter Bootstrap具有覆蓋響應圖像的旋轉木馬

回答

相關問題