动态加载和调整图像大小

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

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

更新 另一种方法,您可能可以接受的是将容器div设置为这样。。。

.mydiv { overflow: hidden; }

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

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

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

然后,对于图像本身,我指定了firefox识别的最大宽度和最大高度:

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

这样,图像最多会自动调整到容器的宽度,但会保持正确的纵横比。万岁!