如何在CSS或HTML中调整图像/gif的大小？

Question

如何在CSS或HTML中调整图像/gif的大小？我希望图片仍然是成比例的，我希望gif和google.com上的谷歌徽标大小差不多，我该怎么做呢？

CSS或HTML很好。

Answer 1

现在，最初的google.com标志图像是269 x 95。我们知道原始图像的高度和宽度，1692x396。

如果您希望这个图像大小完全相同，就需要使用css calc()。

知道你是网络世界的新手，我会尽我所能解释它。calc()代表计算。HTML是网页的内容，如文本和图像，CSS是样式，如颜色、大小和位置。

会选择它。现在得到你想要的宽度的比例，那么1692/269，和高度相同。

现在我们已经做好了一切准备，我们写到：

image {
  width: calc(1692px / 269);
  width: -moz-calc(1692px / 269);
  height: calc(396px / 95);
  height: -moz-calc(396px / 95);
}

这将把图片扩展到您需要的大小。如果您想知道-moz-是什么东西的话，它们基本上都是这样说的，唯一的区别是，因为calc()没有得到真正的支持，所以它将为您解决这个问题。

#logo {
  width: calc(1692px / 269);
  width: -moz-calc(1692px / 269);
  height: calc(396px / 95);
  height: -moz-calc(396px / 95);
}

<image src="https://www.google.com/images/srpr/logo11w.png" id="logo">

由于您对编码了解不多，所以可以访问以下页面来了解更多信息：

http://www.w3schools.com/

http://www.codecademy.com/learn

谢谢!

更新

我忘了我们谈论的只是一幅图像。我把它和父母的相对尺寸搞混了，我搞砸了。

总之，简单地说，只要做：

image {
  width: 269px;
  height: 95px;
}

仅此而已。忘了我之前说的一切吧。

Answer 2

在您想要图像的地方创建div类或id。

然后，将类似background: url("imageName.gif") 0 0 contain的内容添加到您的CSS中，使此图像调整大小以完全适应div。

下面是JSFiddle的一个示例。