我有一个图像库的链接表,我希望能够适应屏幕尺寸,如果窗口大小减少。目前它只保持相同的尺寸。HTML显示表,以适应屏幕尺寸
<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
在你的HTML代码里'#imagegallery'? –
在你的CSS中,img有一个设置宽度,所以如果你调整大小,它将不会改变。这是问题吗?其次,也许我错过了,不过我canot看到一个id = “imagegallery” 在HTML – keikoku92
任何地方只需添加下面的CSS: \t #imagegallery IMG { \t \t最大宽度:100%; \t \t} \t .images { \t \t width:100%; \t \t} –