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

您需要使图像响应

layouts

然而，填充，文本和它的表格将阻止它一直缩小规模。

同样在语义上以这种方式使用表是非常糟糕的。看起来您仅将其用于布局目的。你可以用几个div来达到同样的效果，你会有更多的灵活性和语义正确。

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

HTML显示表以适合屏幕尺寸

1 个答案: