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

Question

您将如何在 CSS 或 HTML 中调整图像/gif 的大小？我希望图像仍然成比例并且我希望 gif 与 google.com 上的 google Logo 大小差不多，我该怎么做？

CSS 或 HTML 都可以。

Answer 1

现在原始的 google.com Logo 图像是 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);
}

这会将图片拉伸(stretch)到您需要的大小。如果你想知道 -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;
}

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