縮放圖像到全寬和縮放

我有一個圖像，我用來填充瀏覽器的全部寬度，但限制在一定的高度。它正在工作，但如果用戶使瀏覽器窗口大於某個點，則會在側面留出空白區域。我如何告訴它然後有效地縮放圖像，以便在縮放時仍佔用全寬度？縮放圖像到全寬和縮放

這是我的代碼：

<div class="category-image"> 
    <img src="http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg"></img> 
</div> 

.category-image img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 100%; 
    width: auto; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

p.category-image, .category-description { 
    margin-bottom: 35px; 
    position: relative; 
    height: 450px; 
}

Codepen：http://codepen.io/anon/pen/grRGBe

我嘗試添加在：最小寬度：200％;但它只是延伸圖像（不縮放）。

來源

2016-03-27 IVCatalina

嘗試通過視口大小添加寬度（設置爲100％瀏覽器大小的寬度）。

.category-image img { position: absolute; left: 50%; top: 50%; height: auto; width: 100vw; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

或者，也可能是有益的，使之成爲背景圖像，而不是根據使用/上下文。

來源

2016-03-27 02:58:27 Garconis

謝謝，這只是扭曲的形象，但並高度必須是固定的（不是自動）。不幸的是，它不能成爲基於它如何設置的背景圖片。 – IVCatalina

body { 

    height: 100%; 
    margin: 0; 
    background: url(http://i988.photobucket.com/albums/af2/pipewun/Awwshop/DSCF0951.jpg) center fixed no-repeat; 
    background-size: cover; 

}

來源

2016-03-27 03:06:43

謝謝，不幸的是，圖像不能作爲背景，但基於它的設置。 – IVCatalina

這是我在你的CodePen中做的。

body { 
    background: url('http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
}

這是什麼做的：

拼搶body標籤本身具有「身體{」
body標籤的背景「的背景設定爲圖像：網址（... 「
設置背景不重複，因爲它喜歡默認重複
居中背景，如果你想要它對齊頁面的頂部，那麼這需要改變爲」中心頂部「
這是一個神奇的元素，它可以做你想做的事...設置大小覆蓋會使背景放大，以填充整個空間，即使圖像不是那麼大。封面是我使用的，請參閱此W3Schools頁面，瞭解您的選擇以及您希望背景執行的操作。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2016-03-27 03:07:26 Metroidaron

謝謝，不幸的是，圖像不能作爲背景，但基於它是如何設置的。 – IVCatalina

IVCatalina，在這個線程上查看我的其他答案，使用圖像完成相同的任務，而不是將圖像設置爲css中的背景。 :) – Metroidaron

這裏是一個備選答案我上面的回答......簡單，我還沒有廣泛的測試，但它顯示爲預期當我舒展在我3個監視窗口工作。

這適用於你的CSS代碼筆... :)

.category-image img { 
     min-width:100%; 
    } 

    p.category-image, .category-description { 
     margin-bottom: 35px; 
     position: relative; 
     height: 450px; 
    }

來源

2016-03-27 03:50:08 Metroidaron

縮放圖像到全寬和縮放

回答

相關問題