您将如何在 CSS 或 HTML 中调整 image/gif 的大小？

Question

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

CSS 或 HTML 都可以。

Answer 1

在您希望图像所在的位置创建 div class 或 ID。

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

这里有一个 JSFiddle 的例子。

Answer 2

现在原来的 google.com 标志图像是 269 x 95。而我们知道原图的高宽，1692x396.

如果您希望此图像的尺寸完全相同，您将使用 css calc().

知道您是网络世界的新手，我将尽力解释它。 calc()代表计算。 HTML是网页的内容，例如文字和图片，CSS是样式，例如颜色、大小和位置。

那会 select 它。现在得到你必须的宽度与你想要的宽度的比例，所以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">

由于您对编码了解不多，可以到以下页面了解更多：

谢谢！

更新

我忘了我们只是在谈论图像。我把它和 parent 的相对大小混淆了，我搞砸了。

无论如何，为了简单起见，只需执行以下操作：

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

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

How would you resize a image/gif in either CSS or HTML?