css - 如何仅使用 CSS 将 3 张图像放在一起并保持响应能力？

Question

我有 3 张图像，我想将它们放置在另一个“居中”的顶部，并希望保留响应式设计。

目前，我必须在调整窗口大小时使用 js 才能正确定位图像。有没有一种纯 CSS 的方式来做到这一点？

这是我工作的 jsfiddle。

https://jsfiddle.net/zt2Lca7v/

<div id="box">
<img id="back" src="http://esurf.us/x/csstry001/back.png" class="img-responsive" />
<img id="front" src="http://esurf.us/x/csstry001/front.png" class="img-responsive" />      
<img id="vline" src="http://esurf.us/x/csstry001/vline.png" class="img-responsive" />      
</div>

body {background-color:black;margin:0;padding:0;}
#box{position:relative;display:block;width:100%;margin:0 auto;}
#back
{
    width:100%;
    display:block;
    margin: 0 auto; 
    position:absolute;
}
#front
{
    display:block;
    position:absolute;
    width:34.0037%
}
#vline
{
    display:block;  
    position:absolute;
    width:2.7422%
}
@media only screen and (min-width: 769px) {
    #box{width:90%;}    
}

function resetimgpos()
{       
    var imgb = document.getElementById("back");
    var wb = imgb.clientWidth;
    var hb = imgb.clientHeight;

    var imgf = document.getElementById("front");
    var wf = imgf.clientWidth;
    var hf = imgf.clientWidth;

    var tf = ((hb - hf)/2) + 'px';
    var lf = ((wb - wf)/2) + 'px';

    $("#front").css({top: tf});
    $("#front").css({left: lf});

    var imgl = document.getElementById("vline");
    var wl = imgl.clientWidth;
    var hl = imgl.clientWidth;

    var ll = ((wb - wl) / 2) + 'px';

    $("#vline").css({left: ll});

}
$(function() {
    $(window).resize(function(){
        resetimgpos();
    });
    resetimgpos();
});

提前致谢。

Answer 1

你的问题是在你不知道大小的 div 中居中图像。

1. 将#back 图像位置更改为relative 从而拉伸(stretch)父div。

2. 将另外两个图像的位置设置为 absolute 并设置 top: 50% 和 left:
50% 将其左上角定位在父 div 的中心。

3. 在圆形图像上使用transform: translate(-50%, -50%)。

4. 在线图像上使用transform: translateX(-50%)。

将 Translate 设置为 -50% 会将其自身宽度/高度的 50% 移动到左侧/顶部。

参见 Fiddle .

我知道我的英语不是很好，但我希望你能理解。

编辑:当然对于线条图像你不需要 top: 50%，抱歉我的错误。