Question

HTML / Javascript - 我想动态加载图片，我要加载的图片可以有不同的宽高比。

我希望图像适合包含div的特定区域 - 包含div宽度的40％和高度的80％的区域。由于它们具有不同的宽高比，当然它们不会总是用尽整个区域，但我想调整它们以使它们不超过界限。但我不知道是否应该指定宽度或高度（以及伙伴属性为auto），因为我不知道图像的宽高比会提前是什么。

有没有CSS方法可以做到这一点？或者我需要使用javascript计算所需的宽度？

PS我只需要在Firefox 3.5中执行此操作！

Answer 1

您的服务器可以找到图像的尺寸，并在您请求图像时发送此信息。如果做不到这一点，您需要等待图片加载，然后才能使其尺寸可用于javascript。

然而，还有另一种方式。请求图像，告诉服务器您所拥有的空间的大小。然后，它可以生成合适的图像版本并对其进行缓存，然后将已经完全正确尺寸的图像发送到浏览器。

<强>更新另一种方式，您可以接受的是设置容器div，如此...

.mydiv { overflow: hidden; }

然后将图像设置为高度固定，将auto设置为宽度。这将导致在图像的左侧和右侧剪切过宽的图像。如果在您的情况下这是可以接受的，那么这是一个非常简单的解决方案。

Answer 2

我的解决方案是提供一个容器div，将对象绑定到所需的大小：

#img_container {
  width: 48%;
  height: 80%;
}

然后对于图像，我自己指定了由firefox识别的max-width和max-height：

#img_container img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

这样，图像最多可自动调整容器的宽度，但保持正确的宽高比。万岁！