Question

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

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

我认为需要一些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。大多数浏览器都会为您保持宽高比。

Answer 2

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

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

实现此目的

控制具有％宽度和身高的图像的纵横比

2 个答案: