此代码应该在其方形div框内重新定位图库图像。所有图像都具有设定的高度，例如100px的。但它们的宽度不同。我不是只显示每张图片中最左边的100px，而是显示它的中心。
我只需要浏览每个img并更改左侧属性以移动图像。
$('img.gall_imgs').load(function() {
var $imgWidth = parseInt($(this).width); // "$(this)" or "this"? parseInt() needed?
var $divWidth = parseInt($(this).closest('div').width);
if($imgWidth > $divWidth) { // if img is wider than its containing div, we'll shift it left
var $position = -1 * ($imgWidth/2 - $divWidth/2); // will give decimals?
$position = parseInt($position) + "px"; // make $position format "123px". parseInt() needed here?
// var $position = '-50px'; // tested with pre-set position
this.css("left", $position); // "$(this)" or "this"?
}
//}
});
另外，我甚至不知道如何在jquery中测试变量值。我尝试发出警报（$ imgWidth），但显然没有用。
编辑：这是我现在拥有的CSS和HTML：
.gall_thumb_img { // the div surrounding the img
width:200px;
height:200px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
text-align:center; // just added this per suggestions. No effect
}
.gall_thumb_img img{ // the img
position:absolute;
display:block;
height:200px;
min-width:200px;
}
HTML：
<div id="gall_box">
<div class="gall_thumb_box" id="gall_thumb_box_0" >
<div class="gall_thumb_img" id="gall_thumb_img_0" >
<a href="?c=ecards&v=single&idx=23&img_dir=nature">
<img class="gall_img" id="img0" src="http://example.com/small.jpg?20111211044810"></a>
</div>
</div>
</div>
EDIT2：这是我根据各种建议改变了jquery的内容。最终结果仍然没有变化。
$(window).load(function() {
$('img.gall_imgs').each(function() {
var imgWidth = $(this).width(); // "$(this)" or "this"?
var divWidth = $(this).closest('div').width();
alert(imgWidth);
if(imgWidth > divWidth) {
var position = -1 * (imgWidth/2 - divWidth/2); // will give decimals?
position = position + "px"; // make position format "123px".
// var position = '-50px'; // tested with set position
this.css("left", position); // "$(this)" or "this"?
}
});
});
文本对齐中心是一个好主意，我将使用它，如果我可以让它工作，但我仍然想知道为什么我的jquery代码不起作用。谢谢。
答案 0 :(得分：1)
像这样的东西
$('img.gall_imgs').each(function() {
var $imgWidth = parseInt($(this).width());
var $divWidth = parseInt($(this).closest('div').width());
答案 1 :(得分：1)
您可以使用jQuery $ .each函数遍历所有img标记并修改它们。
您还可以使用背景图像和“顶部中心”背景位置的div？我认为它可以显示图像的“中心”部分。
顺便问一下，为什么你在你的vars中使用$符号？
答案 2 :(得分：1)
您需要先 .append <img />，然后尝试获取/设置它的属性。
如下面的评论中所述，如果它们已经在您的页面上，则您无需收听onload事件。您应该使用jQuery.each来迭代它们。
像这样：
$(function(){
$('img.gall_imgs').each(function() {
var that = $(this);
var $imgWidth = that.width();
var $divWidth = that.parent().width();
if($imgWidth > $divWidth) {
var $position = -1 * ($imgWidth/2 - $divWidth/2);
$position = $position.toString() + "px";
that.css("left", $position);
}
});
});
答案 3 :(得分：0)
你不需要intParse，而宽度是一个jQuery函数，所以你必须写'width（）'：
$('img.gall_imgs').load(function() {
var $imgWidth = $(this).width();
var $divWidth = $(this).closest('div').width();
if($imgWidth > $divWidth) {
var $position = Math.round(-1 * ($imgWidth - $divWidth) ) + "px";
$(this).css("left", $position);
}
});
另一个（更好的）选项是使用css属性“text-align：center;”。在div内部，图像在里面，因此它可以工作，因为图像内嵌显示在其容器中。
P.D.-“alert（$ imgWidth）;”必须显示它的值，否则执行不会到达这行代码。
答案 4 :(得分：0)
这里的其他答案有一些线索，但他们几乎没有改变我提供的代码，但没有一个工作。所以我将回答我自己的问题，并发布有效的方法。
此功能将图像水平居中于具有固定宽度且溢出设置为隐藏的div内，并在图像加载时激活。 如果没有此功能，只有左N个像素，其中N是包含div的宽度，将是可见的。使用此功能，可以看到中心N像素。
$(window).load(function() {
$("img.gall_img").each(function() {
var imgWidth = $(this).width(); // use "$(this)" b/c "width()" is jquery
var divWidth = $(this).closest('div').width();
//alert(imgWidth + " and " + divWidth);
if(imgWidth > divWidth) {
var position = Math.round(-1 * ((imgWidth/2) - (divWidth/2))); // round up to next integer
position = position + "px"; // make position format "123px". parseInt() needed here?
$(this).css("left", position); // use "$(this)" b/c "css()" is a jquery function (otherwise, could use "this")
}
});
});
我学到的东西。