html - 图像和视频作为具有相同比例的响应元素

Question

我想以相同的尺寸面对面放置图像和视频。图片是 16:9 纵横比，所以 iframe 视频应该是一样的。并且这两个元素都应该是响应式的。

我该怎么做？
这是我的尝试，没有成功:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.framewrap {
  display: inline-block;
  width: 45%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: gold;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

Answer 1

目前的问题似乎是 .framewrap 上的 padding-bottom 是根据包含 block 的宽度计算的。由于 .framewrap 也有 width:45%，所以比例不是您想要的。

padding-bottom 需要是 56.25% 的 45%，如下所示:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
  height: 0;
  padding-bottom: calc(56.25% * .45);
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

但是，我建议使用 pseudo-element .framewrap 设置底部填充，因为该值将根据 .framewrap 的宽度计算。

这是一个演示:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
}

.framewrap::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>