Question

社区！

我一直试图将图像放在3个单独的div中，这就是我想到的代码：

$(document).ready(imgresize);
$(window).on('resize',imgresize);

function imgresize() {

var rk = $(".rk").css('width').replace(/[^-\d\.]/g, '');
var img = $("img").css('width').replace(/[^-\d\.]/g, '');
var calc = (img - rk) / 2;
var calc2 = calc - (calc * 2) + 'px';

$("img").css('margin-left', calc2);
}

它采用图像包装器的当前宽度（例如200px）。然后它采用图像本身的宽度（f.e. 180px）

做了一些数学计算，最后它得出了20px的差异，其中一半需要作为边缘值来使图像居中。

这很好，但只有一个问题。如果我得到3个不同宽度的不同图像，那么这个功能只占用其中一个图像的宽度，而另外两个图像的边距太小或太大。

这就是HTML的样子：

<div id="content-wrapper">
   <div class="rk">
       <img src="img_1.jpg">
   </div>
   <div class="rk">
       <img src="img_2.jpg">
   </div>
   <div class="rk">
       <img src="img_3.jpg">
   </div>
</div>

提前感谢您的帮助！ -Thomas

编辑：问题的示例：

http://jsfiddle.net/R9eZu/3/

我唯一需要知道的是如何为每个img及其容器分离函数。它可能与“.this”一起使用吗？ - 对不起，我是JQuery / Javascript的新手：）

编辑2：更好的理解：

图像应按比例填充容器 - 到那时就没问题了。我现在要做的是将其容器内的每个图像移动到一个单独的值，以便图像全部水平居中。例如：

    -image container width: 200px
    -img1w: 300px
    -img2w: 240px
    -img3w: 420px

    ... calculation is: (imgwidth - containerwidth) / 2 ...

    img1 would be shifted 50px,
    img2 would be shifted 20px,
    img3 would be shifted 110px.

Answer 1

使用foreach在课堂上循环。我认为这是你问的问题

function imgresize() {
    $(".rk").each(function (index, data) {    
        var rk = $(this).width();
        var img = $(this).find(">:first-child").width();
        var calc = (img - rk) / 2;
        var calc2 = calc - (calc * 2) + 'px';
        $(this).find(">:first-child").css('margin-left', calc2);
    });
}

http://jsfiddle.net/R9eZu/5/

JQuery：在div中居中图像

1 个答案: