Question

我想要一个容器并设置容器的背景图像。调整窗口大小时，此容器必须可调整大小。在该容器内部有一组div，它们具有绝对位置和不同的z索引，并组装汽车的快照。通过重新调整窗口大小，这辆自行车也应该重新调整大小并保持在该容器的中心。

<div class="col-lg-8 left-panel">
    <div class="resizable-container">
         <div class="resizable-wrapper">
            <div style="position: absolute; top: 0px; width: 100%; height: 0px;">
                <img src="...."/>
            </div>
            <div style="position: absolute; top: 0px; width: 100%; height: 0px;">
                <img src="...."/>
            </div>
            <div style="position: absolute; top: 0px; width: 100%; height: 0px;">
                <img src="...."/>
            </div>

         </div>
    </div>
</div>


.resizable-container{
    width: 100%;
    min-height: 400px; (this height also should be resizable)
    background:  url('background.jpg');
}
.resizable-wrapper{
    position: relative;
    height: 100%;
    /* margin: 0px auto; */
    top: -59px; (I have to do this to make the image position centered)
    left: -19%; (I have to do this to make the image position centered)
}

你能帮助我吗？我是否需要编写一些脚本来设置高度，顶部和左侧，或者我可以使用CSS完全执行此操作。在这两方面我都需要你的帮助。感谢

这里是Jsfiddle https://jsfiddle.net/7dsggjpo/3/

可重新调整大小的容器，快照在中心定位并调整大小

0 个答案: