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;
}

和CODEPEN DEMO

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;
}

这是demo。

Answer 2

当你说你想要避免'扭曲'时，我不确定你指的是什么问题，因为到目前为止最简单的解决方案是将图像实际包含在标记中，然后添加一些造型让他们反应灵敏。

但是，您可以通过您的方法实现您想要的（仅浏览器支持受损）。您知道希望图像显示的比率。首先，从width: 100% div中移除.img（它是div，它将填充水平空间）。然后，将您的50％添加为填充：

.img {
    padding-bottom: 50%;
}

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

这与获得流畅的视频和iframe工作所必需的方法相同。查看this CSS Tricks article以获得有关正在发生的事情的详细说明。

如何确定没有内容的相对div的大小？

2 个答案: