代码之家 › 专栏 › 技术社区 › Or Assayag

在没有任何滚动的情况下,使图像比例固定的正方形相等

css html

Or Assayag · 技术社区 · 7 年前

我需要有一个盒子的动态数量,每行最多有3个盒子。每个框包含一个图像,我需要以固定的比率保存图像(这些图像实际上是一个视频流,图像的src每秒将被替换30次)。

尽管如此,我还需要避免任何垂直或水平滚动,框可以调整大小,里面的图像需要保持比例纵横比固定,必要时从上/下/左/右留下空白背景。我没有视频的静态高度和宽度,它是动态的。

当我调整窗口大小时,我得到了我想要的结果,但是如果我切换到全屏,我会滚动,并不是所有的框都适合浏览器。我希望所有的框都在浏览器中,没有任何滚动。框缩小,但保持图像的比例。

我使用网格列和网格行创建了start,但仍然存在滚动问题。有人能解决这个问题吗?如果需要的话,我不介意使用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>

https://jsfiddle.net/83Lr45oy/

0 回复 | 直到 5 年前