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 - 图像大小调整

回答

相关问题