尝试将css属性设置为使用Jquery – 在DIV中居中图像

此代码应该在其方形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：

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代码不起作用。 谢谢。

Answer 1

像这样的东西

 $（'img.gall_imgs'）。each（function（）{

 var $ imgWidth = parseInt（$（this）.width（））;
 var $ divWidth = parseInt（$（this）.closest（'div'）。width（））;

Answer 2

您可以使用jQuery $ .each函数遍历所有img标记并修改它们。

您还可以使用背景图像和“顶部中心”背景位置的div？ 我认为显示图像的“中心”部分对你来说也是有用的。

顺便问一下，为什么你在你的vars中使用$符号？

Answer 3

你需要先.append ，然后尝试获取/设置它的属性。

如下面的评论中所述，如果它们已经在您的页面上，则您无需收听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); } }); }); 

Answer 4

你不需要intParse和width是一个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内部，图像在里面，因此它可以工作，因为图像内嵌显示在其容器中。

PD-“警报（$ imgWidth）;” 必须向您显示其值，否则执行不会到达此行代码。

Answer 5

这里的其他答案有一些线索，但它们几乎没有改变我提供的代码，但没有一个工作。 所以我将回答我自己的问题，并发布有效的方法。

此function将图像水平居中于具有固定宽度且溢出设置为隐藏的div内，并在图像加载时激活。 如果没有此function，只有左N个像素，其中N是包含div的宽度，将是可见的。 使用此function，中心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") } }); }); 

我学到的东西。

1. “$（document）.ready”在这里不起作用。 必须使用“$（window）.load”，因为ready函数在加载图像之前触发。 要操纵图像位置和大小，您必须等到它们满载。
2. $（this）= this，除了你想要访问jQuery函数（如width（）和css（））和属性时使用$（this）。
3. $（“tag”）。each：遍历指定的标记（或其他对象）的集合，依次将“each（）”中的代码应用于集合的每个成员。 在里面使用“this”或“$（this）”来指代当前成员。
4. 使用谷歌浏览器调试jQuery很难。