看起来我没有解释清楚,对此我深感抱歉。
我已经编辑了这个问题,使其更加清晰明了。
场景
我们有一个网站,不托管图片。它所做的是引用其他服务器中的图像。
计划
- 调整大小并保持比例。
- 将调整后的图像居中。
- 具有灵活性,可以适应多种尺寸。
错误
我的代码按预期工作,但有时会出现 Bug。
如果您转到网站的搜索页面,并在第1、2、3和4页之间多次切换,您会注意到有时图像很好...有时它们会左对齐,并且不占据整个容器区域。
链接
完整的网站(测试版)
帮助我的 jQuery 插件(jThumb)
详细计划
假设图像为 600x400 像素(请记住它们不托管在此服务器上),使用 jQuery 和 CSS,我想将图像调整大小(保持比例)为 310x200 像素的容器。
另一个挑战是将图像居中。
所有这些都必须具有灵活性,因为网站中有几种不同的容器尺寸。
到目前为止我做了什么(您可以在上面的链接中找到)
要调整图像大小,我正在执行以下操作:
var img = new Image();
img.src = $(this).attr("src");
var width = $(this).css('width');
var height = $(this).css('height');
var photoAspectRatio = img.width / img.height;
var canvasAspectRatio = width.replace("px", "") / height.replace("px", "");
if (photoAspectRatio < canvasAspectRatio) {
$(this).css('width', width);
$(this).css('height', 'auto');
var intHeight = height.replace("px", ""); //tirar o PX
$(this).css('marginTop', (-Math.floor(intHeight / 2)));
}
else {
$(this).css('width', 'auto');
$(this).css('height', height);
}
$(this).wrap('<div class="thumb-img" style="width:' + width + ' ;height:' + height + ';"><div class="thumb-inner">' + '</div></div>');
我要让图片居中,我正在这么做:
jQuery(this).css('position','absolute');
jQuery(this).left( '-' + ( parseInt( $(this).width() ) / 2 ) + 'px' );
jQuery(this).top( '-' + ( parseInt( $(this).height() ) / 2 ) + 'px' );
jQuery(this).css('margin-left', '50%' );
jQuery(this).css('margin-top', '50%');