0

我有 3 张图像水平堆叠（每张图像都紧挨着其他）。我的目标是在缩小页面大小时保持这些图像水平堆叠。我希望图片自动缩小而不将其分解到下一行。我不想使用百分比 (%) 来表示图像的大小。我根本不想设置图像的大小。

当我使用引导程序并缩小页面时，当页面大小变得小于图片大小时，右侧的图像会换行，第二个图像也会发生同样的事情，直到所有图像垂直堆叠。在这一点上，当我进一步缩小页面时，我得到了我想要的 - 图片根据页面大小调整大小。

请帮助我在不将图片换行的情况下获得这种行为。

这是我的html：

 <body>
     <img src="img/test.png" />
     <img src="img/test.png" />
     <img src="img/test.png" />
</body>

谢谢...

4

2 回答 2

0 
@media (min-width:450px;){
   img{
       width:50%;/*or whatever floats your boat*/
   }
}

您可以修改该min-width:值以自定义您的需求。这将无法处理调整大小。只是不同的媒体尺寸。

您可以使用jQuery.resize来处理实际调整浏览器窗口的大小，如下所示：

$(window).resize(function(){

    var div = $('#images');//images container
    div.find('img').each(function(k,v){

        $(v).width((div.width()/4));//resize each image however you want
    });
});
于 2013-08-16T22:02:37.980 回答
0

将您的图像包装在任何容器中，例如一个 div，然后根据您想要的行为，您有两个选项：

a) 为容器设置一个 css min-width 属性，不要让它比这更窄。b) 为容器设置一个 css overflow-x 属性，让图像隐藏，显示滚动条，...

于 2013-08-16T22:05:59.313 回答