HTML CSS - 图片调整大小

Question

如果我有一张20*20像素的图片，我可以使用以下代码将其缩小，使整个图片变小：

 <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进行调整大小？

谢谢

- Adam

---

我从不依赖浏览器来进行图像调整大小...因为根据浏览器的不同，它往往会显得模糊或锯齿状。如果图像比您所需的尺寸大得多，则即使您将其显示为较小的尺寸，全尺寸图像仍必须下载。我更喜欢在Photoshop中进行图像调整大小，并在浏览器中以100％的比例显示完整图像。 - Sparky

看起来你正在使用两个不同的图像，这可能解释了裁剪的原因。对于那个，你不需要背景剪辑或背景大小。你的 CSS 是正确的。你的图像 URI 不匹配。 - albert

我使用了imageresize.php，其中包含宽度和高度两个参数，您可以上传一张图片并动态地获取多个尺寸，我还为重复的图像尺寸制作了缓存。(imagesize.php文件)是可用于图像调整大小的PHP脚本。 - user1646111

Answer 1

在div#smile选择器中添加background-size: contain;。 jsFiddle。

请注意，浏览器支持可能是一个问题。 IE < 9不支持此属性。

- alex

---

他不能直接将侧边属性应用于img标签，而不是使用背景图像吗？ - jdi

@jdi：OP也可以这样做。但我想他们想用 background-image 进行操作。 - alex

是的，我只是假设那是他试图实现它的一种方式。有多种方法可以解决这个问题！ :-) - jdi

Answer 2

是否调整 img 的大小而不使用背景图片？

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

CSS

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

- jdi