如何使表中的圖像動態適合瀏覽器的大小？

我有一張桌子，根據用戶的輸入可以包含1到12張圖片。如果有一個圖像，那麼它會很好地顯示在表格中。但是，如果有12張圖像，則會向下拉伸，直到需要向下滾動才能查看其餘圖像。如何使表中的圖像動態適合瀏覽器的大小？

是否有動態調整圖像大小的方法，以便不需要滾動並且所有內容都適合表格？

什麼它看起來像

5圖片：

12張圖片：

這是當前表我已經和我使用JavaScript來填寫圖片：

<table id="first"> 
      <tr> 
       <td> 
        <ul> 
         <li><img id="firstL1"></li> 
         <li><img id="firstL2"></li> 
         <li><img id="firstL3"></li> 
         <li><img id="firstL4"></li> 
         <li><img id="firstL5"></li> 
         <li><img id="firstL6"></li> 
         <li><img id="firstL7"></li> 
         <li><img id="firstL8"></li> 
         <li><img id="firstL9"></li> 
         <li><img id="firstL10"></li> 
         <li><img id="firstL11"></li> 
         <li><img id="firstL12"></li> 
        </ul> 
       </td> 
       <td><ul></ul></td> 
       <td> 
        <ul> 
         <li><img id="firstR1"></li> 
         <li><img id="firstR2"></li> 
         <li><img id="firstR3"></li> 
         <li><img id="firstR4"></li> 
         <li><img id="firstR5"></li> 
         <li><img id="firstR6"></li> 
         <li><img id="firstR7"></li> 
         <li><img id="firstR8"></li> 
         <li><img id="firstR9"></li> 
         <li><img id="firstR10"></li> 
         <li><img id="firstR11"></li> 
         <li><img id="firstR12"></li> 
        </ul> 
       </td> 
      </tr> 
     </table>

來源

2016-01-30 CHEWWWWWWWWWW

您可以在圖像上設置百分比寬度。具有width:100%的圖像將展開以適合父表格單元格，即使該表格單元格是基於視口大小和其他表格單元格的大小動態調整大小的。

See a demo這個例子：

<table> 
    <tr> 
     <td><img src="http://lorempixel.com/640/480" style="width:100%"></td> 
     <td><img src="http://lorempixel.com/320/240" style="width:100%"></td> 
     <td><img src="http://lorempixel.com/640/480" style="width:100%"></td> 
    </tr> 
</table>

來源

2016-01-30 10:26:01 NoChecksum

我試過造型寬度和百分比的高度，但它仍然延伸下來 – CHEWWWWWWWWWW

我想我誤解了你的問題:)你能畫出一幅粗略的草圖，說明你想如何顯示12張圖片嗎？你想額外的列水平傳播？ – NoChecksum

基本上，如果有12張圖像，是否有辦法將它們全部擠入桌面，使其看起來像具有5張圖像的圖像，而不是一直垂直向下展開？ – CHEWWWWWWWWWW

是的，你可以使用css media query來調整各破發點例如在屏幕大小500px的化妝IMG尺寸圖像100px的

@media only screen and (max-width: 500px) { 
    img { 
     width: 100px; 
    } 
}

來源

2016-01-30 10:26:55

如何使表中的圖像動態適合瀏覽器的大小？

回答

相關問題