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

当前问题似乎是padding-bottom上的.framewrap是根据包含块的宽度计算的。由于.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>

但是，我建议使用.framewrap中的pseudo-element来设置底部填充，因为该值将根据.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>

Answer 2

尝试一下：

HTML

  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788- 
   large.jpeg' alt='img'>

  <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
  picture-in-picture" allowfullscreen></iframe>

CSS

.imgt, .iframetop {
  display: inline-block;
  width: 45%;
  height: 200px; // add height according to your need
}

codepen working demo

图像和视频是比例相同的响应元素

2 个答案: