Twitter 2.2旋轉木馬示例：如何保持圖像比例？

如果在使用http://twitter.github.com/bootstrap/examples/carousel.html時減少窗口瀏覽器寬度，則可以看到背景圖像寬高比發生變化。我想維護它（1：1），在左側或右側裁剪我的圖像，或者水平對齊。Twitter 2.2旋轉木馬示例：如何保持圖像比例？

你有什麼建議？

來源

2012-11-02 Francesco Frassinelli

isnt this img {max-width：100％;}或者我誤解了這個問題？ – Richlewis

@Richlewis它不同：這個問題與引導響應式樣式表有關。試試吧） –

你有選項，既保持圖像比例：

選項1

background: url(yourimage.jpg) no-repeat center center/cover;

最後一部分是background-size: cover財產。它會根據瀏覽器寬度使背景圖像放大，以確保它填充整個整個 div。

實施例：http://i.imgur.com/0tQ9Rxm.png

選項2

background: url(yourimage.jpg) no-repeat center center;

這是相同的效果，但沒有放大部分。背景將保持其方面並保持居中，但如果您的瀏覽器寬度大於圖像寬度（在本例中爲1500px），則會看到背景色（在本例中爲白色）。

實施例：http://i.imgur.com/6x594jH.png

我推薦選項1。如果您調整瀏覽器的大小，但幾乎沒有人會看到縮放效果，並且訪問者只會看到填充的背景。

來源

2013-01-31 03:23:31 jgthms

第一個選項是我需要的，但第二個選項也很有趣。謝謝:) –

比縱橫比的變化好得多，謝謝！儘管當視圖/屏幕的尺寸變得太小時（例如，在iPhone上），圖像被裁剪... –

作爲@jgthms回覆的後續，我使用了選項1.但是，在iOS Safari中，背景圖像根本沒有顯示出來。看起來，單行CSS語法並不好。通過將其更改爲下面我能夠得到它的工作：

background: url(yourimage.jpg) no-repeat center center; 
background-size: cover;

來源

2013-02-23 19:09:43 danhbear

對於那些誰像我一樣，沒看到那裏的CSS進場這裏是一個在上下文中的例子（與iOS的風格）。我應該注意到這是使用Bootstrap 3.1.1。

<div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <p>Example text 
      <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a> 
      </p> 
     </div> 
     </div> 
    </div>

來源

2014-02-22 06:19:01

Twitter 2.2旋轉木馬示例：如何保持圖像比例？

回答

相關問題