Question

我有一个项目，我在窗口中间有4张图像，如下所示：

12
34

我希望所有图像都能随窗口一起向上和向下缩放，但要保持其位置。

现在，我把它们都放在一个名为Center的div中：

<div style="max-width:1200px;" id="centerArrows">        
    <img src="images/homePage/arrowUL.png" style="position: relative; top: -100px; float:left;"  />
    <img src="images/homePage/arrowUR.png" style="position: relative; left: 40px; top: -95px;" />    
    <img src="images/homePage/arrowDL.png" style="position: relative; left: -35px; top: -80px;" />
    <img src="images/homePage/arrowDR.png" style="position: relative; left: 670px; top: -510px;" />
</div>

使用这个CSS：

#centerArrows {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;    
    margin-bottom: auto;
    position: relative;
    z-index: 0;   
    width: auto;        
}
img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

知道我做错了吗？

Answer 1

看到这个小提琴：

http://jsfiddle.net/LDt8P/

html , body , #centerArrows{
    display:table;
    width:100%;
    height:100%;
}
#centerArrows{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

响应评论以限制图像扩散到4行：

http://jsfiddle.net/LDt8P/1/

使用JQuery 的解决方案，当窗口宽度小于特定宽度时，使图像更小以适应窗口的宽度：

http://jsfiddle.net/LDt8P/3/

Answer 2

var initialWidth = $(window).width();
$(window).resize(function(){
    $('img').each(function(){
        var img         = $(this),
            pos         = img.data('pos') || $(this).offset(),
            imgWidth    = img.data('width') || img.width(),
            ratio       = $(window).width() / initialWidth,
            newImgWidth = imgWidth * ratio,
            newImgLeft  = pos * ratio;
        img.css({
                width: newImgWidth + 'px',
                left: newImgLeft + 'px'
            });
    });
}).resize();

这是一个简单的jQuery实现。在这种情况下，你必须使用position：fixed或position：absolute（在这种情况下，元素相对父元素应该是正文。

代码未经测试......（抱歉，我现在没有时间）

如何使用窗口缩放图像元素而不是重新定位

2 个答案: