全屏背景圖像在人像中停止縮放

該客戶持有頁面看起來風景不錯，但所有的人像版本砍掉模特臉上的不降反升縮放圖像。不幸的是，徽標是主圖像的一部分，我無法單獨獲取。

我不明白爲什麼圖像看起來很好地縮放，直到它達到約800像素寬，然後開始修剪。我看不到會導致這種情況的（簡單）CSS中的任何內容。除非是我還沒完全理解的bootstrap呢？

而不是'頂部'嘗試'中心頂部'。那你在找什麼？ –

謝謝比利 - 我已經試過，認爲它仍然開始裁剪小於約800像素的視口尺寸。 V煩人。 –

我看着你的網站，我看到了預期的行爲。您告訴瀏覽器使用背景圖片來覆蓋所有可用空間。當瀏覽器不能覆蓋整個空間時，即它在一個維度上達到極限時，它就別無選擇，只能開始裁剪另一維度以保持縱橫比不變。畢竟，你不想扭曲這個模型的臉。

嘗試，例如，與

background-size: contain; 
background-repeat: no-repeat;

更換

background-size: cover;

，你會明白我的意思。

編輯：

如果您想使用相同的圖像，試試這個：

background-position: center top;

現在你的形象都非常好，也肖像。

2014-03-28 15:35:26

謝謝安德烈。我想我現在正在圍繞這個方向:)這樣一個好的方法是否會有更小的圖像或「肖像友好」圖像，以便切換到較小的視口尺寸？ –

我用一個建議更新了我的回覆。 –

謝謝安德烈，我這樣做，並改變了背景大小包含肖像大小和它的好看（最後！） –

回答