文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用整个页面显示8张图片

问使用整个页面显示8张图片
EN

Stack Overflow用户
提问于 2016-02-07 01:59:32
回答 2查看 37关注 0票数 0

我有一些网络摄像头，我试图很好地显示在一个html页面。此页面将在2或3个屏幕上使用(使用Rpi或windows客户端)。所有的屏幕都有不同的分辨率，但我试图使我的视图对显示做出响应。

我试着这样显示它：

​

​

目前我有这样的代码：

代码语言：javascript
复制
    <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的屏幕时，我是否仍能使其具有响应性？

额外的问题是，并不是所有的图像都是相同的大小。我正在考虑使用object-fit对它们进行裁剪。

谢谢你的帮助。

html
css
EN

回答 2

Stack Overflow用户

发布于 2016-02-07 02:06:29

你可以使用Bootstrap grid，类似于...

代码语言：javascript
复制
<div class="wrapper">
    <div class="row">
        <div class="col-xs-8">Big screen</div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-12">Small screen</div>
                <div class="col-xs-12">Small screen</div>
                <div class="col-xs-12">Small screen</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
    </div>
</div>

尽管这也可以通过表或flex模型来实现，但这取决于您的选择

票数 0
EN

Stack Overflow用户

发布于 2016-02-07 02:06:32

这不是一个理想的解决方案，但如果您选择使用表，这应该可以工作：

​

代码语言：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);




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;
代码语言：javascript
复制
<table border="1">
  <tr>
    <td rowspan="3" colspan="2">  
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
      </td>
    </tr>
  <tr>
    <td>
      
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
      </td>
    </tr>
  <tr>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
      </td>
    </tr>
  <tr>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
      </td>
    </tr>
  </table>

<br>
<span style="color:white" id=curTime></span>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35244427

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档