HTML CSS - 圖像大小調整

如果我有一個形象 - 說20個* 20個像素HTML CSS - 圖像大小調整

我可以用這條線來調整圖像 - 它將使整個圖像變小：

<img src="images/online-dating-main/blinking smile14x14.gif" width="14" height="14"/>

哪有我做這個調整與CSS？

我已經試過，但它只是裁剪圖像：

<div id="smile"></div> 

    div#smile { 
    background: url(../images/online-dating-main/smile.gif) no-repeat 0 0; 
    width: 14px; 
    height: 14px; 
}

我怎會與CSS調整？

THX

來源

2011-10-05 Adam

我從來不依賴於瀏覽器做圖像尺寸調整...取決於瀏覽器它往往看起來模糊或鋸齒狀。如果圖像比您想要的尺寸大得多，即使您顯示的尺寸較小，仍然必須下載全尺寸圖像。我更喜歡在Photoshop中進行圖像大小調整，並在瀏覽器中以100％的比例顯示完整圖像。 – Sparky

它看起來像你使用兩個單獨的圖像，這將解釋裁剪。你不需要那個背景剪輯或背景大小。你的CSS是正確的。你的圖片uri不匹配。 – albert

我使用了帶有兩個參數寬度和高度的imageresize.php，你可以上傳一張圖片並動態獲得多個大小，我還爲重複的圖片大小製作了一個緩存。（文件imagesize.php）是PHP腳本，可用於圖像調整大小） – 2013-01-28 10:54:16

添加background-size: contain;到div#smile選擇。

jsFiddle。

請注意，瀏覽器支持可能是一個問題。 IE < 9不支持此屬性。

來源

2011-10-05 02:58:32 alex

或者不能只是將邊屬性直接應用到img標記而不是使用背景圖像？ – jdi

@jdi：OP也可以。但我想他們想用「背景圖像」來做到這一點。 – alex

是的，我只是認爲這是他試圖完成它的一種方式。多種方式來剝皮這隻貓！ :-) – jdi

調整img而不是使用背景圖像？

<img class="resize" src="images/online-dating-main/blinking smile14x14.gif" />

CSS

.resize { 
    width: 14x; 
    heigh: 14px; 
}

來源

2011-10-05 03:01:49 jdi

HTML CSS - 圖像大小調整

回答

相關問題