javascript - 动态加载和调整图像大小

Question

HTML/Javascript - 我想动态加载图像，我要加载的图像可以具有不同的纵横比。

我希望图像适合包含 div 的特定区域 - 包含 div 宽度的 40% 和高度的 80% 的区域。由于它们具有不同的纵横比，当然它们不会总是用完整个区域，但我想调整它们的大小以使其不超过界限。但我不知道我是否应该提前指定宽度或高度(以及 partner 属性为 auto)，因为我不知道图像的纵横比是多少。

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

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

Answer 1

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

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

更新 您可能可以接受的另一种方式是像这样设置容器 div...

.mydiv { overflow: hidden; }

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