縮放裏面的背景圖片

我有一個基本的滑塊在網站上運行。縮放裏面的背景圖片

我有漂亮的高分辨率圖像，所以我可以將圖像縮放幾百像素。任何想法如何將背景圖像縮放到某個特定點？圖像目前在每張幻燈片1000px，想要將bg寬度縮放到像1300px ...如果瀏覽器是那麼寬...

打開CSS或js，將是很好的ie7 +兼容和功能在其他瀏覽器上。

有什麼想法？

2012-04-30 TJ Sherrill

如果您使用的圖像作爲div元素的背景，它會隨着div的增長（直到它的最大尺寸，更小的div將裁剪bg）。如果您使用img標籤來顯示圖片，只需給它的CSS「寬度：100％」即可。 – KBN

從背景和位置圖像中刪除它作爲絕對

selectior-name-if-any img{ 
width:100%; 
height:auto;

}

也應該在IE7中工作。

來源

2012-04-30 08:19:31 Yasir

試試這個：

-o-background-size: width height;   
-webkit-background-size: width height; 
-khtml-background-size: width height;  
-moz-background-size: width height;  
background-size: width height;

演示：http://jsfiddle.net/tfazD/

來源

2012-04-30 08:02:46 codef0rmer

支持哪種瀏覽器？ – Nightfirecat

http://caniuse.com/#search=background-size – codef0rmer

除了最佳實踐（因爲它們顯示的圖像只應爲大），你可以只使用CSS屬性background-size，可悲的是，這不是但完全支持，所以你將不得不放棄對可憐的IE瀏覽器的支持。

使用JS你可以檢查window.innerWidth（document.documentElement.clientWidth用於IE）和應用background-size - 屬性，如果它符合視窗（CSS的方法是media-queries）。對於IE而言，您必須隱藏背景圖片，並使用其專有的filter以及sizingMethod='scale'聲明。（如果瀏覽器不支持background-size屬性（爲了檢測這個，你可以使用modernizr））並且將z-index:-9999;應用到它，所以它保留在後臺。

使用JS，您還可以建立某種條件延遲加載技術，根據用戶的視口大小（移動用戶不需要1300²px）加載不同大小的圖像 - 刪除對IE8的支持，以前也可以使用上面提到的CSS的媒體查詢加載不同的背景圖像（或使用類似respond.js效仿的IE媒體查詢）

來源

2012-04-30 08:03:38 Peter

縮放裏面的背景圖片

回答

相關問題