基於瀏覽器寬度顯示圖像

我有一堆圖像，我想用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

基於瀏覽器寬度顯示圖像

回答

相關問題