0
我有一些攝像頭，我試圖在1個html頁面上很好地顯示。此頁面將用於2或3個屏幕（使用Rpi或Windows客戶端）。 所有的屏幕有不同的分辨率，但我試圖讓我的視圖響應顯示。使用整個頁面顯示8幅圖像
我想是這樣顯示的：
目前我有這樣的代碼：
<html>
<body bgcolor=000000>
<script language="javascript" type="text/javascript" >
<!--
function ChangeMedia(){
var d = new Date();
var t = d.getTime();
document.getElementById('cam1').src = "http://10.101.4.2/image.jpg?feed=%7B66CA3FEA-7841-4486-B7D2-253EBF08E852%7D&webview&quality=100&noupsample=1/"+t;
document.getElementById('cam2').src = "http://10.101.4.2/image.jpg?feed=%7BEB2548AA-3183-4FB9-BD5A-199887346827%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam3').src = "http://10.101.4.2/image.jpg?feed=%7B6A3C56CE-F186-4205-9A62-7740207F8BEF%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam4').src = "http://10.101.4.2/image.jpg?feed=%7BAB013929-4D26-4CD4-82BA-F13532D4E7CE%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam5').src = "http://10.101.4.2/image.jpg?feed=%7BE9FB6FCC-0748-48A5-A679-DBD875C5A651%7D&webview&quality=100&noupsample=2/"+t;
document.getElementById('cam6').src = "http://10.101.4.2/image.jpg?feed=%7B0E5C454A-98DC-4C16-95B9-CE3B6097B2E7%7D&webview&quality=100&noupsample=2/"+t;
}
var reloadcam = setInterval("ChangeMedia()",500);
</script>
<script type="text/javascript">
function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds;
timeElement.innerHTML="<font style='font-size:12px;font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime
</script>
<center>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
<br>
<span style="color:white" id=curTime></span>
</center>
</body>
</html>
導致此： 
現在的我我想知道如何讓它工作，這樣我就能得到1個大一點的圖片，而3個較小的圖片就可以了，而另外4個會更小低。應該使用整個寬度。 我應該使用表格，但是如果使用較小的屏幕或4：3屏幕，我仍然可以使其響應。
額外的問題是，並非所有的圖像都是相同的大小。我正在考慮通過使用對象適合來裁剪它們。
感謝您的任何幫助。
最簡單的方法可能是使用基於百分比的計算將分辨率分成合適大小的塊。然後製作您的div，並讓您的Feed適合每個盒子。 – SmokeyPHP