如何调整没有内容的相对div的大小？

Question

我有一个HTML标记，其中排版内容位于<p>-标签内。在这些标签之间，我想放置一些图像。这些图像始终具有相同的大小：100% 宽，50% 高。
为了避免一些失真，我设置了一个具有此大小的<div>标签，并将图像设置为具有封面大小的背景图像。

此<div>不包含任何内容，背景图像除外。所以我的大小不起作用，因为我无法将其设置为 position: absolute / fixed; ，因为它不再适合<p>标签之间。

那么我如何能够在不失去合身性的情况下调整空div 的大小呢？

HTML 标记：

<div class="container">
  <section class="about">
    <div class="content">
      <p>Lorem ipsum dolor</p>
      <div class="img"></div>
      <p>Lorem ipsum dolor</p> 
    </div>
  </section>
</div>

和 CSS 样式

.container,
.container > section{
  position: fixed;
  height: 100%;
  width: 100%;
}
.container > section{
  overflow:auto;
}
.container > section > .content > p{
  padding: 5% 15% 5% 15%;
  font-family: Arial, sans-serif;
  font-size: 1.8em;
  line-height: 1.5;
}
.container > section > .content > .img{
  width:100%;
  height:50%;
  background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center;
  background-size:cover;
}

还有一个代码笔演示

Answer 1

我认为问题是height. 尝试删除 50% 的高度，改为添加 50% 的padding

.container > section > .content > .img{
  display: block;
  width:100%;
  padding: 0 0 50% 0;
  background: url(http://www.hdcarwallpapers.com/walls/widescreen_lamborghini_lp710-wide.jpg) no-repeat center center;
  background-size:cover;
}

这是一个演示。

Answer 2

当你说要避免"失真"时，我不确定你指的是什么问题，因为到目前为止，这里最简单的解决方案是将图像本身实际包含在标记中，然后添加一些样式以使它们响应。

但是，您可以使用自己的方法实现您想要的（只有浏览器支持受到影响）。您知道希望图像显示的比率。首先，从.imgdiv中删除width: 100%（这是一个div，它将填充水平空间）。然后，添加您的 50% 作为填充：

.img {
    padding-bottom: 50%;
}

当您将高度（或此处的垂直填充）设置为百分比时，您实际上是将其设置为父级宽度的百分比。这意味着您的.imgdiv 将始终具有等于.contentdiv 的一半padding，这就是您所追求的。

这与使流畅的视频和 iframe 正常工作所需的方法相同。查看这篇 CSS Tricks 文章，了解正在发生的事情的良好解释。