我正在创建一个图库,展示多种格式的图片(宽、方和高)在一个固定的空间内。理想的解决方案是让所有的图片尺寸都相同,但这是不可能实现的。
我使用了max-width和max-height的组合来确保图片在有限的空间内正确缩放。唯一的问题在于Internet Explorer,因为它无法理解这些属性,所以会以max-width和max-height的宽度和高度来显示图片。
我一直在寻找解决这个问题的各种方法,但还没有成功(目前为止)。该图库使用jQuery和Galleriffic,除了max-width/max-height问题之外都很好用。
有什么建议吗?
编辑:看起来问题在于Internet Explorer处理图片的max-height和max-width方式不正确,导致图片不能正确缩放。
编辑2:我进行了一些测试,IE的问题不在于max-width和max-height,它们正常工作(确保图片大小不会超过设置的值),例如:
max-width: 600px;
max-height: 600px;
会确保图片不会变得比这两个值更大。问题在于图片没有正确缩放,所以高图片看起来被压扁了,宽图片看起来被拉伸了。我切换了IE7兼容模式,图片正常显示,但在IE8中,它们看起来被压扁或拉伸了(这意味着这是IE8的问题)。