如何減少瀏覽器大小時的圖像大小。

我已經通過CSS插入圖像。當我減小瀏覽器窗口的大小時，圖像的大小保持不變，因此如何減小大小圖像。如何減少瀏覽器大小時的圖像大小。

我編碼方式類似於以下內容：

<div id="main-content"> 
    <br/> 
    <div id="slideshow"> 

    </div> 
</div>

CSS如下：

#slideshow{ 
    background:url(img/image.png) no-repeat; 
    height:512px; 
    /*margin:auto 30px;*/ 
    margin:40px 28px auto; 
    position:relative; 
}

我做了谷歌非常多。但我沒有得到如何解決這個問題。請任何人幫我解決這個問題。在此先感謝..

來源

2013-05-29 Anand Jaju

使用** **％的insted的** ** PX。 – Vucko

當我在#slideshow製作.. height：auto;然後圖像消失.. –

試試這個

#slideshow{ 
    background:url(res/iphone_small.png) no-repeat; 
    height:50%; 
    /*margin:auto 30px;*/ 
    margin:40px 28px auto; 
    position:relative; 
}

來源

2013-05-29 09:24:59

這不會更改元素的背景大小。 – pzin

你是不是在找改變圖像，你正在尋找改變背景，這是非常不同的。

當元素更改時，可以使用background-size使背景可調整大小。一些更多鈔票值：

background-size: cover; 
background-size: contain; 
background-size: 100%; 
background-size: 200px 300px;

我通常使用蓋或包含，既適合圖像到其容器，以不同的方式。試試看。

更多信息有關背景大小：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

來源

2013-05-29 09:30:31 pzin

使用CSS背景屬性將圖像縮放

#slideshow { 
background-size:cover;}

來源

2013-05-29 09:31:35

如何減少瀏覽器大小時的圖像大小。

回答

相關問題