Question

我正在尝试使用JavaScript制作一个以div为中心的图像，但我的问题是JavaScript代码添加margin-left:35px;

像这样：

<img src="abc.jpg" class="height" style="margin-left: 35px;">

我为图片中心创建了这段代码：

$('.imgs_w img').load(function() {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
        var middle = 0 - (image.width() - image.closest('.imgs_w').width()) / 2;
        image.css('margin-left', middle + 'px');
    } else {
        var middle = 0 - (image.height() - image.closest('.imgs_w').height()) / 2;
        image.css('margin-top', middle + 'px');
    }
});

和css是这样的：

*

.imgs_w {
    float:left;
    width:70px;
    height:70px;
    margin-left:2px;
    margin-top:5px;
    overflow: hidden;
    }
.imgs_w img.height {
   width: auto;
   height:100%;
}
.imgs_w img {
   width: 100%;
}

*

HTML就是这样：

<div class="imgs_w"><img src="abc.jpg" /></div>
<div class="imgs_w"><img src="abc.jpg" /></div>

这里有什么问题可以帮助我吗？这是来自jsfiddle的演示页面：DEMO

Answer 1

您无需计算保证金。您可以使用容器的css属性text-align: center;将图像放在中间。如果你想使它也以verticaly为中心，你必须使用javascript：

$('.imgs_w img').load(function() {
    var image = $(this),
            height = image.height(),
            width = image.width();

        if (width > height) {
            image.addClass('height');
            var top = $('.imgs_w').css('height');
            var margin = parseInt(top - height) / 2;
            image.css('margin-top', margin+'px');
        } 
    });

或者您可以使用容器display:table-cell; vertical-align: middle;的css属性，但这取决于您的内容。

您的css代码可能有些问题，因为您重新定义了img的宽度。更好的方法是交换这样的定义：

.imgs_w img {
   width: 100%;
}
.imgs_w img.height {
   width: auto;
   height:100%;
}

使用JavaScript在div中心的图像

1 个答案: