试图CSS属性LEFT设置为使用jQuery - 围绕内部DIV图像(Trying to set

此代码应该重新定位自己的方盒子的div里面画廊图像。所有的图像都设定高度例如100像素。但是，它们的宽度是不同的。而不是只显示最左边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代码不工作。谢谢。

Answer 1:

像这样的事情

$('img.gall_imgs').each(function() {

var $imgWidth = parseInt($(this).width());
var $divWidth = parseInt($(this).closest('div').width());

Answer 2:

您可以使用jQuery的$。每个功能走在所有img标签和修改。

你也可以使用一个div背景图像和“顶级中锋”的背景位置？我认为它会工作，以及为您呈现图像的“中心”的一部分。

顺便说一句，你为什么用你的瓦尔$符号？

Answer 3:

~~您需要.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);
        }
    });
});

Answer 4:

你并不需要intParse和宽度是一个jQuery的功能，所以你必须写“宽（）”：

$('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属性“文本对齐：中心;”。 的div里面的图片都在里面所以它的工作原理，因为图像显示内嵌到它的容器。

PD- “警报（$ imgWidth）;” 必须告诉你它的价值，否则，执行没有达到这一行代码。

Answer 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")
            }
    });
});

事情我学到。

“$（文件）。就绪”不在这里工作了。因为加载图像之前的准备功能触发器都必须用“$（窗口）.load”。为了操纵图像的位置和大小，你不得不等待，直到他们被完全加载。
$（本）=这一点，除非你使用$（本）当您要访问的jQuery函数（如宽度（）和CSS（））和属性。
$（“标签”）的每个：遍历的指定标签（或其他对象）的集合，内“的每个（）”到依次集合的每个成员施加的代码。使用“这个”或“$（本）”中提到的当前成员。
这很难用谷歌浏览器调试的jQuery。

文章来源: Trying to set css property LEFT to using Jquery - Centering image inside DIV