是否可以在不裁剪圖像的情況下使正方形圖像適合填充引導背景圖像滑塊？

Question

我已經嘗試過在SO上找到的每種組合來嘗試解決此問題，但是我沒有運氣...所以這是我的問題。

我遇到了一個問題，我無法找到正確的CSS組合（我認為這可以使用純CSS完成）來獲得完美的正方形圖像，從而無法填充我正在工作的網站的背景。 方形圖像是來自中畫幅膠片相機的掃描圖像，它們看起來不適合。 但是，來自數碼相機的圖像非常合適。 對於正方形圖像，看起來好像從所有4個側面切開了一部分。

這是代碼：

 .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel { position: relative; } 

  <!-- Full Page Image Background Carousel Header --> <header id="myCarousel" class="carousel slide"> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('http://testing.bitzer.me/kirstenleah/img/bg.jpg');"></div> </div> <div class="item"> <div class="fill" style="background-image:url('img/bg1.jpg');"></div> </div> </div> </header> 

您可以在http://testing.bitzer.me/kirstenleah/index.html上看到它的運行情況

上面的兩個圖像均為800x800px，並且被裁剪為不顯示整個圖像。

我真的很感謝這里的一些指導，以便整個圖像可以顯示在背景上。

Answer 1

您只能將屏幕填充為瀏覽器窗口（矩形）的大小。 因此，如果您的圖像是正方形的，那么您將只能使頂部和底部與屏幕的邊緣相交，而兩側將有間隙。 如果您將側面拉伸成水平方向並希望保持比例，則頂部和底部將被切除-如您的示例中所示。

您需要做的是妥協。 使用以下內容：

background-size:contain;
          or
background-size:cover;
          or
background-size: auto 100%;
          or
background-size: 100% auto;

試試看一下，看看它們是如何工作的-確保每次調整窗口的大小，以便觀察它們如何響應-

如果您希望圖像完全以任何尺寸覆蓋屏幕，則可以使用媒體查詢在瀏覽器窗口比例和其他尺寸組交替出現的確切點從100％自動切換為自動100％優先。

如果您想更好地闡明您的問題並添加一個jsfiddle，我將很樂意為您解決這個問題，因為我知道這聽起來會令人困惑。

Answer 2

最后三個屬性將發揮神奇作用：

.fill {
    width: 100%;
    height: 100%;
    background-color:#ccc;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}