Question

我有3张图片我喜欢彼此叠加＆＃34;居中＆＃34;并希望保留响应式设计。

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

这是我工作的jsfiddle。

<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

你的问题是将图像居中于你不知道的大小。

将#back图像位置更改为relative，因此会拉伸父div。
将另外两张图片的位置设置为absolute，并设置top: 50%和left: 50%，将其左上角定位在父div的中心。
在圆圈图片上使用transform: translate(-50%, -50%)。
在线条图片上使用transform: translateX(-50%)。

将平移设置为-50％将div自身宽度/高度的50％移动到左/上。

请参阅Fiddle。

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

编辑：当然对于线条图像，您不需要top: 50%，对不起我的错误。

Answer 2

您可以使用％，margin和absolute：

http://codepen.io/anon/pen/zGgmyQ

＆＃13;

#box {
  position: relative;/* you need this ! */
  /*demo purpose START */
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
}

#box:hover img {
  opacity: 0.35;
  /*demo purpose END */
}

#back {
  display: block;
  width: 100%;
}

#front {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  margin: -5% 0 0 -5.2%;/* tune this if new image or different shape */
  z-index: 1;
}

#vline {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  margin-left: -1.5%/*tune this if new image or different shape*/
}

＆＃13;

<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>

＆＃13;

当您为图像设置宽度或高度时，它会保持图像的比例。（这里的线条高100％，拨号器的宽度为10％）

您可以根据实际需要调整大小和边距。

Answer 3

As mentioned by @sajran. You can use the translate to align the image vertically center.

Here is the working fiddle link:

http://jsfiddle.net/aL72r8qf

如何将3个图像放在一起并使用CSS保持响应？

3 个答案: