基于浏览器宽度显示图像

我有一堆图像，我想用jQuery显示。我有div，我使用jquery根据一些node_id标准填充div。例如，如果node_id是teamA，则会显示图像名称中具有teamA文本的图像。基于浏览器宽度显示图像

它的工作发现，问题是，当把图像放在html的主体上，图像垂直显示，直到主页面上没有空间。

我想这样做取决于浏览器窗口的大小，根据浏览器窗口的大小显示图像。例如，如果图像大小为500x500，浏览器窗口宽度为700，则应该能够在每行显示一个图像。如果浏览器的宽度为1200，则我的浏览器窗口中每行应该有2个图像。

为了给你一个想法，我已经把HTML和jQuery代码来告诉你我在做什么：

<div class="tab-content" id="tabs1"> 
    <div id="team_A" class="team"></div> 
    <div id="team_B" class="team"></div> 
    <div id="team_C" class="team"></div> 
    <div id="team_D" class="team"></div> 
</div>

这是jQuery代码基于jstree NODE_ID显示图像：

var team_A_Img = "http://test.net" + node_id + "-team_A.png"; 
      $(function() { 

       var myImage = new Image(); 
       $(myImage).load(function() { 

        $("#team_A").html(myImage); 

       }).error(function() { 

        $('#team_A').hide(); 
       }).attr('src', Img_A_Img) 

      });

这样做但我需要根据浏览器窗口大小垂直或水平显示图像，这取决于我在浏览器上有多少空间。有人可以告诉我如何做到这一点吗？

来源

2013-03-13 user1471980

你看过媒体质疑吗？ – 2013-03-13 16:40:12

@Eric Lemos，什么是媒体质疑？ – user1471980 2013-03-13 16:41:25

在你的设计中，你可以指定图片的宽度，例如500px，就像你说的那样？ – 2013-03-13 16:42:27

如果可以指定图像的宽度，则可以在一个块级元素浮动它们。例如：

<div class="tab-content" id="tabs1"> 
    <div id="team_A" class="team"><img src="http://placehold.it/350x150"></div> 
    <div id="team_B" class="team"><img src="http://placehold.it/350x150"></div> 
    <div id="team_C" class="team"><img src="http://placehold.it/350x150"></div> 
    <div id="team_D" class="team"><img src="http://placehold.it/350x150"></div> 
</div>

，并使用下面的CSS：

.tab-content { 
    padding: 0px; 
    background-color: yellow; 
    overflow: auto; 
} 
.team { 
    float: left; 
    margin: 0 5px 5px 0; 
} 
.team img { 
    display: block; 
}

为了使这一工作，特别是如果你想使用的背景颜色或图像的父容器设置overflow: auto。

您可以调整浮动元素的边距或填充以在图像之间创建和设置样式排水沟。

最后，我在图像上使用display: block来处理任何可能由内联元素产生的空白。

仅供参考，请参阅：http://jsfiddle.net/audetwebdesign/8FEeM/

来源

2013-03-13 16:54:59

<div class="tab-content" id="tabs1"> 
<div id="team_A" class="team"> 
    <img src="http://placehold.it/500x500" /> 
    <img src="http://placehold.it/500x500" /> 
    <img src="http://placehold.it/500x500" /> 
</div>

CSS

.team img{float: left;}

来源

2013-03-13 16:54:36 Jaspero

在我的脚本可以这样做：（ '团队'）。

$ CSS（{ “宽度”：$（窗口）.WIDTH（），“高度“：”自动“}）;

来源

2013-03-13 17:04:33 user1471980

基于浏览器宽度显示图像

回答

相关问题