HTML显示表，以适应屏幕尺寸

Question

我有一个图像库的链接表，我希望能够适应屏幕尺寸，如果窗口大小减少。目前它只保持相同的尺寸。

<table class="images" id="albums"> 
    <tr> 
    <td> 
     <a href="academy-blitz-may-2014.html" ><img id="academy-blitz-may-2014" src="img/album-covers/academy-blitz-may-2014.jpg" title="Academy Blitz May 2014"/></a> 
    </td> 

    <td> 
     <a href="academy-blitz-october-2014.html" ><img id="academy-blitz-october-2014" src="img/album-covers/academy-blitz-october-2014.jpg" title="Academy Blitz October 2014"/></a> 
    </td> 

    <td> 
     <a href="academy-blitz-november-2012.html" ><img id="academy-blitz-november-2012" src="img/album-covers/academy-blitz-november-2012.jpg" title="Academy Blitz November 2012"/></a> 
    </td> 

    <td> 
     <a href="summer-camp-2014.html" ><img id="summer-camp-2014" src="img/album-covers/summer-camp-2014.jpg" title="Summer Camp 2014"/></a> 
    </td> 

    <td> 
     <a href="academy-on-tour-tullamore-2015.html" ><img id="academy-on-tour-tullamore-2015" src="img/album-covers/academy-on-tour-tullamore-2015.jpg" title="Academy On Tour - Tullamore 2015"/></a> 
    </td> 


    </tr> 

    <tr> 
    <td> 
     Academy Blitz May 2014 
    </td> 

    <td> 
     Academy Blitz October 2014 
    </td> 

    <td> 
     Academy Blitz November 2012 
    </td> 

    <td> 
     Summer Camp 2014 
    </td> 

    <td> 
     Academy On Tour - Tullamore 2015 
    </td> 
    </tr> 

    <tr> 
    <td> 
     <a href="u18s-v-mullingar-2013.html" ><img id="u18s-v-mullingar-2013" src="img/album-covers/u18s-v-mullingar-2013.jpg" title="U18's V Mullingar 2013"/></a> 
    </td> 

    <td> 
     <a href="u18s-league-win-2014.html" ><img id="u18s-league-win-2014" src="img/album-covers/u18s-league-win-2014.jpg" title="U18's League Win 2014"/></a> 
    </td> 

    <td> 
     <a href="u12s-v-tullamore-2014.html" ><img id="u12s-v-tullamore-2014" src="img/album-covers/u12s-v-tullamore-2014.jpg" title="U12's V Tullamore 2014"/></a> 
    </td> 

    <td> 
     <a href="u11-lions-semi-final-2015.html" ><img id="u11-lions-semi-final-2015" src="img/album-covers/u11-lions-semi-final-2015.jpg" title="U11 Lions Semi-Final 2015"/></a> 
    </td> 

    <td> 
     <a href="easter-camp-2015.html" ><img id="easter-camp-2015" src="img/album-covers/easter-camp-2015.jpg" title="Easter Camp 2015"/></a> 
    </td> 
    </tr> 

    <tr> 
    <td> 
     U18's v Mullingar 2013 
    </td> 

    <td> 
     U18's League Win 2014 
    </td> 

    <td> 
     U12's v Tullamore 2014 
    </td> 

    <td> 
     U11 Lions Semi-Final 2015 
    </td> 

    <td> 
     Easter Camp 2015 
    </td> 
    </tr>  
</table> 

我的CSS：

#albums {width:70%;} 

#albums img {opacity: 0.9;} 

#albums img:hover {opacity:1.0;} 

#albums td {text-align:center;padding-top:14px;padding-right:14px;padding-bottom:0px;padding-left:14px;} 

每当我试着缩小尺寸，其他所有功能适合屏幕大小，而是画廊保持相同的大小，尽管使用相同的代码为其他功能（宽度：％）。

这是什么样子全屏幕： http://i.imgur.com/wbFzPnS.jpg

这是什么样子时，我缩小窗口大小： http://i.imgur.com/hNfBFD5.jpg

Answer 1

你需要作出响应

#albums img { 
    width:100%; 
    max-width:100%; 
} 

图像

然而，填充，文本和表的事实将阻止它从一切缩小尺寸。

同样在语义上以这种方式使用表格是相当糟糕的。看起来你只是将它用于布局目的。你可以用几个div来达到同样的效果，你会有更多的灵活性，并且在语义上是正确的。

这里的a codepen有一个更好的方法。您可能希望将其转换为2列或单列布局，并且媒体查询的大小约为600像素。