Question

我有以下HTML：

<div id="container">
    <div id="cont1">
        <img src="img/1.png" />
    </div>
    <div id="cont2">
        <img src="img/2.png" />
    </div>
    <div id="cont3">
        <img src="img/3.png" />
    </div>
    <div id="cont4">
        <img src="img/4.png" />
    </div>
    <div id="cont5">
        <img src="img/5.png" />
    </div>
    <div id="cont6">
        <img src="img/6.png" />
    </div>
    <div id="cont7">
        <img src="img/7.png" />
    </div>
</div>

我希望如此，调整窗口大小，图片 1.png ... 7.png ：

具有相同的窗口宽度（OK，DONE）;
留在页面的中心（问题在这里）。

我正在使用的jQuery代码是：

$(window).resize(function () {
        var w=$(window).width();
        var w7=w*7;
        $('#container').width(w7);

        var pw=w;
        $('#container > div').width(pw);

        $('#container > div > div > img').width(w);
 });

实际上发生的是，图像（以及它们的容器 cont1 ... cont7 ）向调整大小的方向移动。

我明显错过了什么？

Answer 1

我的问题好友！你只需要做一件事。添加“text-align：center;”在你的容器div

jQuery onResize图像定位问题

1 个答案: