用身体的百分比宽度和高度控制图像的纵横比答案

【问题标题】：Controlling aspect ratio of images with % width and height of body用身体的百分比宽度和高度控制图像的纵横比
【发布时间】：2012-10-17 12:52:49
【问题描述】：

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

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

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

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

【问题讨论】：

图像是混合方向的还是都是横向或纵向的？通常，您可以将宽度或高度设置为百分比，而将另一个设置为自动，但混合方向需要将一个类附加到图像上，以识别它是什么。
它们都是横向的。只是高度有点波动，所以看起来令人反感。

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

仅使用 CSS 会花费您大量时间来针对所有兄弟进行优化。

通过一些修改和 js，您可以使用 Perfect background image 实现此目的

【讨论】：