javascript - 用 % 宽度和高度控制图像的纵横比

Question

我的站点中出现了这两张图片，它们是我从另一家公司的服务器上提取的。我需要这些照片随浏览器窗口缩放，所以我给了它们 % 宽度和高度以随 body 缩放。

问题是其中一些图片大小不同，我需要所有图片看起来都一样。当我知道图像的宽度和高度值时，这很容易做到，因为我可以裁剪或调整大小。但是，您如何才能保持具有可缩放宽度和高度的比率？

我认为需要一些 JavaScript 才能做到这一点。这是我拥有的 CSS:

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.image {
  width: 40%;
  height: 40%;
  margin: 1%;
}

Answer 1

如果您不关心 IE8，您可以只指定 width。大多数浏览器会为您保持纵横比。