尝试将 css 属性 LEFT 设置为使用 Jquery - 在 DIV 中居中图像答案

【问题标题】：Trying to set css property LEFT to using Jquery - Centering image inside DIV尝试将 css 属性 LEFT 设置为使用 Jquery - 在 DIV 中居中图像
【发布时间】：2012-01-17 19:56:26
【问题描述】：

此代码应该在其方形 div 框内重新定位画廊图像。所有图像都有一个设定的高度，例如100像素。但它们的宽度不同。与其只显示每张图片最左边的 100px，我更希望它显示中心。

我只需要遍历每个 img 并更改 left 属性以将图像向左移动。

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

【问题讨论】：

标签： jquery image jquery-selectors

【解决方案1】：

类似的东西

$('img.gall_imgs').each(function() { var $imgWidth = parseInt($(this).width()); var $divWidth = parseInt($(this).closest('div').width());

【讨论】：

但由于它们是图像，因此必须在加载后完成。那么我是否只需包装 $('img').load(function() {});围绕每个功能？
使用 $(window).load(function () { } );相反， img.load 意味着它在每个图像加载后重复每个函数。

【解决方案2】：

您可以使用jQuery $.each 函数遍历所有img 标签并对其进行修改。

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

顺便说一句，你为什么在你的变量中使用 $ 符号？

【讨论】：

"顺便问一下，你为什么在你的变量中使用 $ 符号？"我是否碰巧提到我完全不知道自己在做什么？

【解决方案3】：

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

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

【讨论】：

我认为我不需要附加任何内容。每页有多张图片。每个都在“gall_imgs”类中。我需要修改它们，而不是附加任何东西。
如果它们已经在您的页面上，为什么还要收听onload 事件？您应该使用jQuery.each 来遍历它们。
我需要它在页面加载后立即运行，所以我必须将它绑定到 .load 或 .ready ，对吗？根据我的阅读，在下载所有 img 之前，您无法获得 img 的宽度属性。 ".ready" 在下载 imgs 之前运行，所以它不起作用。不过，无论哪种方式，我都不认为 .load 与 .ready 是我的问题，是吗？这是另一回事。
这可能对你有帮助：stackoverflow.com/questions/263359/…
+1 用于发布 .each() 函数，但我尝试了您的代码，但没有成功。我不知道为什么，但你确定你可以使用 that.closest().width 吗？这不是将jquery“最接近”与javascript“宽度”混合在一起吗？我找到了解决方案，我会自己发布。

【解决方案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）；”必须向你显示它的值，否则执行不会到达这行代码。

【讨论】：

谢谢，如上图所示，我在 CSS 中添加了 text-align: center ，但没有任何效果。如果它有效，我会很乐意使用它，但即便如此，我仍然想找出 jquery 不工作的原因。
图像位置为绝对位置时，对齐将不起作用。
在您的编辑中，您没有使用 Math.round() 来避免小数，并且您正在使用 'this.css(..' 而不是 '$(this).css(...'您在调用 CSS 之前测试了“位置”值吗？

【解决方案5】：

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

此函数将在具有固定宽度且溢出设置为隐藏的 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")
            }
    });
});

我学到的东西。

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

【讨论】：