在具有最小高度的引導程序傳送帶中居中映像

我正在使用引導程序傳送帶並嘗試在窗口重新調整大小（尤其是移動大小）時保持其中的圖像以保持居中。在具有最小高度的引導程序傳送帶中居中映像

原始圖像是1600 x 600.我希望它在大多數情況下填充頁面的整個寬度。但是，當它下降到移動（或類似iPad）尺寸時，我希望它的最小尺寸爲800 x 300，並且以旋轉木馬爲中心。

我已經試過以下，但兩件事情：

圖像不中心。它保持與左邊對齊並右移。
圖像在轉換之間奇怪地「跳躍」。在轉換髮生之前，圖像似乎變化很快/然後過渡。

這裏的CSS和HTML：

.carousel-inner img { 
     width: 100%; max-height: 1800px; 
     min-height: 300px; min-width: 800px; overflow:hidden; 
    } 

    <div id="CarouselHome" class="carousel slide carousel-fade" data-ride="carousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img-1.jpg""> 
      </div> 
      <div class="item"> 
       <img src="img-2.jpg""> 
      </div> 
      <div class="item"> 
       <img src="img-3.jpg""> 
      </div> 
     </div> 
    </div>

我也試過在下面的鏈接中的項目，但他們並沒有爲我工作：

Make Bootstrap's Carousel both center AND responsive?

來源

2016-05-04 ptownbro

使用引導媒體查詢 –

使用透明.png或.gif作爲幻燈片圖像，然後使用css設置每個幻燈片圖像的背景圖像。對於手機/平板電腦，在您的css中使用媒體查詢來更改背景大小。確保您的背景圖像與透明背景圖像的大小相同。

當瀏覽器調整大小時，透明圖像將保持其縱橫比，從而保持傳送帶的縱橫比。

爲每個項目添加一個類名稱，並在您定義背景圖像時在css中使用它。

.item img { 
    background:url(path-to-image) no-repeat center center; 
    background-size:100% auto; 
} 
@media(max-width:800px){ 
    .item img { 
    background-size:800px 300px; 
    min-height: 300px; 
    } 
}

http://codepen.io/partypete25/pen/mPaJWb

來源

2016-05-04 05:20:54 partypete25

-1

我用這個解決方案：Center a large image of unknown size inside a smaller div with overflow hidden

這中心的圖像。

來源

2016-09-14 23:49:51 paulocholla

請將您的具體問題作爲另一個問題發佈;這是值得解決的，它不會被看作是答案的一部分。 – Prune

謝謝@Prune。只是做了，因爲我真的想/需要解決這個問題。這裏的鏈接：http://stackoverflow.com/questions/39501885/bootstrap-carousel-wide-centered-images-bumps-jumps-during-transition – paulocholla

...但你忽略從你的答案刪除多餘的部分在這裏。我剛剛爲你解決了這個問題。也許這會爲你節省更多的選票。另外，請提供解釋以增強您的答案。只有鏈接的答案也會畫旗子和反對票。 – Prune

在具有最小高度的引導程序傳送帶中居中映像

回答

相關問題