动态加载和调整图像大小

服务器可以找到图像的尺寸,并在请求图像时发送此信息。如果失败,您将需要等待图像加载,然后它的维度才可用于JavaScript。

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

更新 另一种可能被您接受的方法是将container div设置为这样…

.mydiv { overflow: hidden; }

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

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

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

然后,对于图像本身,我分配了最大宽度和最大高度,这是由Firefox识别的:

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

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