Javascript 使用%宽度和高度控制图像的纵横比

我从另一家公司的服务器上获取的这两张图片出现在我的网站上。我需要这些照片与浏览器窗口一起缩放，所以我给了它们%的宽度和高度以与身体一起缩放

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

我认为要做到这一点需要一些JavaScript。以下是我的CSS：

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

---

只使用CSS会花费大量时间来优化所有Broser

---

通过一些修改和js，您可以使用

实现这一点。如果您不关心IE8，您可以只指定宽度。大多数浏览器都会为您保持纵横比。

图像是混合方向还是全部为横向或纵向？通常情况下，您可以将宽度或高度设置为百分比，并将另一个设置为自动，但混合方向将要求在图像上附加一个类，以标识其位置。它们都是横向的。只是高度有点波动，所以看起来很令人讨厌。