縮放圖像以適合DIV

我想縮放圖片以適應主要的div類縮放圖像以適合DIV

對不起，忘了提，我需要它在IE8工作

2012-03-22 Plexus81

可以使用background-size:contain CSS屬性。

.image { 
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat; 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
}

如果您需要支持舊的瀏覽器（在Windows XP即IE瀏覽器及以下的，因爲Vista和Windows 7級的用戶應該是IE9），使用<img>標籤來代替，因爲這會導致瀏覽器將圖像縮放到您使用CSS高度/寬度或標籤的HTML屬性指定的尺寸。

<img class="image" src="http://astridterese.files.wordpress.com/2010/07/google.jpg" />

來源

2012-03-22 12:50:28 deed02392

這不適用於IE8，所以我想它會排除它作爲大多數事情的可行選項。 – DoctorMick 2012-03-22 12:56:13

如果我在後臺設置了這樣的東西有沒有辦法在css中設置url？ – Plexus81 2012-03-22 13:20:11

你不能不幸的是，你需要使用javascript來設置標籤的src屬性。 – deed02392 2012-03-22 13:22:37

這裏是小提琴的更新版本，它利用了CSS3屬性background-size的：http://jsfiddle.net/EyW99/2/

你需要添加到您的風格是什麼基本上是background-size: contain;使瀏覽器縮放圖像，使如果您想自己控制尺寸，則仍然適合您的元素的圖像的最大可能尺寸，或者background-size:X% X%;或background-size:Xpx Xpx;。

注意

由於背景的大小是一個CSS3屬性，它限制了瀏覽器的支持。

IE9 +，Firefox 4 +，Opera，Chrome和Safari 5+。

跨瀏覽器soultion

這種解決方案也許不是「好」作爲新的CSS屬性，但對於跨瀏覽器支持，你可以改變你的div到img，這將使瀏覽器調整圖像大小。

來源

2012-03-22 12:52:48

.main{ 
    height: 113px; 
    max-width: 400px; 
} 

.image { 
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat scroll 0 0 transparent; 
    background-size: 100% 100%; 
}

這適用於Chrome而不是IE8，因此可能無用。

就個人而言，我會將內部div更改爲圖像標記，其寬度和高度設置爲100％。

來源

2012-03-22 12:54:45 DoctorMick

如果您不需要純粹的CSS解決方案，那麼您可以使用JavaScript來實現適用於所有主流瀏覽器的解決方案。 jQuery的插件會根據您的需要進行調整，並會在div大小發生變化時動態調整大小。

來源

2012-03-22 12:59:30 Kaivosukeltaja

縮放圖像以適合DIV

回答

相關問題