我需要具有动态数量的盒子，每行最多有3个盒子。
每个框包含一个图像，我需要将图像保持固定比例（这些图像实际上是视频流，该图像的src每秒将被替换30次）。
尽管如此，我还需要避免任何垂直或水平滚动，可以调整框的大小，并且内部的图像需要保持比例不变，并根据需要在顶部/底部/左侧/右侧保留空白背景。
我没有静态的视频高度和宽度，而是动态的。
当我调整窗口大小时，会得到想要的结果，但是如果我切换到全屏，则会滚动，并且并非所有的框都适合浏览器。我希望所有框都在浏览器中而不滚动。盒子缩小了，但保持图像的比例。
我设法使用grid-column和grid-row创建起点，但是仍然存在滚动问题。有人对此有解决方案吗？我不介意使用JavaScript来计算所需的内容。
这是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding: 0;
margin: 0;
font-size: 1em;
line-height: 4em;
color: #000000;
background: #ffffff;
}
* {
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 8px;
padding: 8px;
height: 100vh;
background-color: #333333;
}
.wrapper>div {
background-color: #333333;
}
.item1 {
grid-column: 1/2;
grid-row: 1/2;
}
.item2 {
grid-column: 2/3;
grid-row: 1/2;
}
.item3 {
grid-column: 3/3;
grid-row: 1/2;
}
.item4 {
grid-column: 1/2;
grid-row: 2/3;
}
.item5 {
grid-column: 2/3;
grid-row: 2/3;
}
.item6 {
grid-column: 3/3;
grid-row: 2/3;
}
.item7 {
grid-column: 1/2;
grid-row: 3/3;
}
.item8 {
grid-column: 2/3;
grid-row: 3/3;
}
.item9 {
grid-column: 3/3;
grid-row: 3/3;
}
.item {
border: 1px red solid;
}
.camera-style {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item item1">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item2">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item3">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item4">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item5">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item6">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item7">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item8">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
<div class="item item9">
<div class="camera-style">
<img src="https://osrfgtie1.office.osrenterprises.com/resources?rid=aef7c00cf8aa119d9ab413f6a21860971ab7d5a76a4deefc9aa28afb2aca0f33&url=https%3A%2F%2Fcoubsecure-s.akamaihd.net%2Fget%2Fb99%2Fp%2Fcoub%2Fsimple%2Fcw_image%2Fc27abea443a%2F7f0e6650b89bcb9801efb%2Fmed_1476219692_00018.jpg&cid=b3IuYXNzYXlhZ0BPU1JET00uTE9DQUw1__FGL__93159432a0683b9b903677cc15e9e07c28ccfc5300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000&eid=4" alt="" title="" />
</div>
</div>
</div>
</body>
</html>