Question

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

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">

由于您对编码知之甚少，可以访问以下页面了解更多信息：

谢谢！

<强>更新

我忘记了我们只谈论一张图片。我把它与父母的相对大小混淆了，我搞砸了。

无论如何，为了简单起见，只需：

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

就是这样。忘掉我之前说的一切。

Answer 2

创建您想要图像的div类或ID。

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

以下是JSFiddle的示例。