Question

我正在尝试创建一个用于索引webcameras的简单网站。我所知道的大多数网站或软件一次只能显示几张图片。我想要做的是将许多凸轮显示为＆＃34;网格＆＃34;，它会根据您当前的屏幕尺寸（主要是1080p）进行调整。接下来，我希望能够从相机中单击图像并使图像全屏显示，或至少居中。

这适用于监视情况。任何脚本，wordpressthemes或类似的解决方案也将被考虑。

任何人都知道如何做到这一点？

到目前为止，这是我的代码：

<meta charset="UTF-8">
<html>
<style>
th {
    background-color: red;
    color: white;
}

table {
    margin: 0px auto;            
}

</style>
<table>
<table style="margin: 0px auto; height: 200px;" border="100" width="1002"       cellspacing="0" cellpadding="0">
<body style="background-color:#000000">
<tr>
<th>Bodø småbåthavn</th>
<th>Moskenes</th>
<th>Sortland Havn Sør</th>
<th>Sortland Havn Sør/Øst</th>
<th>Ankenes båthavn</th>
</tr>
<tr>
<td><img src="http://193.201.74.114/mjpg/video.mjpg" alt="Bodø Småbåthavn" width="350" height="300" /></td>
<td><img src="http://www.lofotposten.no/static/local/webcam/moskenes.jpg" alt="Moskenes" width="350" height="300" /></td>
<td><img src="http://sortland-havn.no/webcamera/havnnord.jpg" alt="Sortland Sør" width="350" height="300" /></td>
<td><img src="http://sortland-havn.no/webcamera/havnsor.jpg" alt="Sortland Sør/Øst" width="350" height="300" /></td>
<td><img src="http://ankenes.dyndns.org/jpg/image.jpg" alt="Ankenes båthavn" width="350" height="300" /></td>
</tr>
<tr>
<th>Tromsø Havn kamera 1</th>
<th>Tromsø Havn kamera 2</th>
<th>Tromsø Havn kamera 3</th>
<th>Senja Havn</th>
<th>Skjervøy Havn</th>
</tr>
<tr>
<td><img src="http://www.tromso.havn.no/uploads/img/webcams/0.jpg" alt="Tromsø Havn kamera 1" width="350" height="300" /></td>
<td><img src="http://www.tromso.havn.no/uploads/img/webcams/1.jpg" alt="Tromsø Havn kamera 2" width="350" height="300" /></td>
<td><img src="http://www.tromso.havn.no/uploads/img/webcams/2.jpg" alt="Tromsø" width="350" height="300" /></td>
<td><img src="http://images.webcams.travel/webcam/1323784937-Weather-Hamn-i-Senja%2C-Northern-Norway-Visit-The-Arctic-Hamn.jpg" alt="Senja Havn" width="350" height="300" /></td>
<td><img src="http://www.arcticutleie.no/webkamera.jpg" alt="Skjervøy" width="350" height="300" /></td>
</tr>
<tr>
<th>Honningsvåg Havn</th>
<th>Honningsvåg fra Elvedalen</th>
<th>Honningsvåg fra Fagskolen</th>
<th>Berlevåg</th>
<th>Båtsfjord</th>
</tr>
<tr>
<td><img src="http://213.161.172.115/jpg/image.jpg" alt="Honningsvåg Havn" width="350" height="300" /></td>
<td><img src="http://vaer.visto.no/elvstor.jpg" alt="Honningsvåg fra Elvedalen" width="350" height="300" /></td>
<td><img src="http://hvg.axiscam.net/jpg/image.jpg" alt="Honningsvåg fra Fagskolen" width="350" height="300" /></td>
<td><img src="http://62.63.28.98/jpg/image.jpg" alt="Berlevåg Havn" width="350" height="300" /></td>
<td><img src="http://185.36.212.175/axis-cgi/mjpg/video.cgi?resolution=CIF&amp;dummy=1425475415542" alt="Båtsfjord" width="350" height="300" /></td>
</tr>
</tbody>
</table>
</html>

Answer 1

我建议远离表格并使用基于 CSS-Tricks 的flexbox model的灵活网格布局。

全尺寸图片：任何＆＃34;灯箱＆＃34;基于jQuery的插件就足够了。

响应表与可点击的图片

1 个答案: