Question

我试图让 .video-wrap 高度达到包装纸高度的100％。我只需要使所有图像的宽度和高度相同。问题是在px中没有指定高度以创建响应式布局。如何使所有图像高度相同？我需要no-js解决方案。

＆＃13;

body {
  background: #a1a1a1;
}
.video-wrap {} .wrapper {
  display: flex;
  height: inherit;
}
.video {
  width: 29.69%;
  margin: 2%;
  box-sizing: border-box;
  background: gray;
}
.content {
  padding: 1.5%;
  border: 3px solid rgba(140, 139, 139, 0.6);
  background-color: black;
}
.video img {
  width: 100%;
  height: 100%;
  display: block;
}
div.desc {
  color: white;
  text-align: center;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="" />
          </a>
        </div>
        <div class="desc">NY 1</div>
      </div>
    </div>
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/8747/SITours/one-world-observatory-admission-in-new-york-city-224249.jpg" />
          </a>
        </div>
        <div class="desc">NY 2</div>
      </div>
    </div>
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="http://cdn.ek.aero/english/images/New-York-1_tcm233-2256848.jpg" />
          </a>
        </div>
        <div class="desc">NY 2</div>
      </div>
    </div>

  </div>
</body>

＆＃13;

Answer 1

尝试此，如果您可以完整img然后更改.content身高

.content
{
  padding: 1.5%;
  border: 3px solid rgba(140, 139, 139, 0.6);
  background-color: black;
  height: 80%; /* Change per. Base on requirements*/
}

摘录示例

body {
  background: #a1a1a1;
}
.video-wrap {
    height: 100%;
  }
.wrapper {
  display: flex;
  height: inherit;
}
.video {
  width: 29.69%;
  margin: 2%;
  box-sizing: border-box;
  background: gray;
}
.content {
  padding: 1.5%;
  border: 3px solid rgba(140, 139, 139, 0.6);
  background-color: black;
  height: 80%;
}
.video img {
  width: 100%;
  height: 100%;
  display: block;
}
div.desc {
  color: white;
  text-align: center;
}

<body>
  <div class="wrapper">
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="" />
          </a>
        </div>
        <div class="desc">NY 1</div>
      </div>
    </div>
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/8747/SITours/one-world-observatory-admission-in-new-york-city-224249.jpg" />
          </a>
        </div>
        <div class="desc">NY 2</div>
      </div>
    </div>
    <div class="video">
      <div class="video-wrap">
        <div class="content">
          <a target="_blank" href={link}>
            <img src="http://cdn.ek.aero/english/images/New-York-1_tcm233-2256848.jpg" />
          </a>
        </div>
        <div class="desc">NY 2</div>
      </div>
    </div>

  </div>
</body>

Answer 2

为了增加对我总是使用的元素的响应能力：

height:auto;
width:100%;

当您希望高度和宽度始终相同时，您的图像应该是这样的，或者您必须在css中使用js除了为图像属性添加宽度和高度之外无法做到这一点。
例如，您可以使用某些值作为图像大小，如下所示：

.container img
{
height:150px;
width:150px;
}

内容高度为父容器的100％

2 个答案: