尝试将CS​​S属性LEFT设置为使用Jquery-在DIV中居中放置图像 [英] Trying to set css property LEFT to using Jquery - Centering image inside DIV

问题描述

该代码应将图库图像重新放置在其方形div框内.所有图像都有设定的高度，例如100px.但是它们的宽度是不同的.我宁愿它显示中心，而不是只显示每张图片的最左边的100px.

This code is supposed to reposition gallery images inside of their square div boxes. All the images have a set height e.g. 100px. But their widths are different. Rather than only show the left-most 100px of every picture, I'd rather it show the center.

我需要做的是遍历每张img并更改left属性，以将图像向左移动.

All I need is to go through each img and change the left property to shift the images 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)，但显然没有用.

Also, I don't even know how to test variables values inside of jquery. I tried putting in an alert($imgWidth) but it obviously didn't work.

这是我现在拥有的CSS和HTML:

Here is the CSS and HTML I have now:

.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>

这是我根据各种建议将jquery更改为的内容.最终结果仍然没有变化.

Here is what I've changed the jquery to based on various suggestions. Still no change in end result.

$(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代码无法正常工作.谢谢.

Text-align center is a good idea that I will use if I can get it to work, but I would still like to know why my jquery code is not working. Thank you.

推荐答案

您需要先.append <img />，然后尝试获取/设置其属性.

You need to .append the <img /> first, then try to get/set it's properties.

如下面的评论所述，如果它们已经在您的页面上，则您无需侦听onload事件.您应该使用jQuery.each遍历它们.

As stated in the comments below, If they are already on your page, you don't need to listen on the onload event. You should use jQuery.each to iterate through them.

像这样:

$(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);
        }
    });
});

这篇关于尝试将CS​​S属性LEFT设置为使用Jquery-在DIV中居中放置图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！