0

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

这<div>不包含任何内容，除了背景图像。所以我的尺寸不起作用，因为我不能将它设置为position: absolute / fixed;，因为它不再适合<p>-tags 之间的大小。

那么我如何能够在不失去合身性的情况下调整空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 演示

4

2 回答 2

2

我认为问题出在height. 尝试删除 50% 的高度，而不是添加padding50%

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

这是一个演示。

于 2014-03-03T15:55:59.780 回答
0

当您说要避免“失真”时，我不确定您指的是什么问题，因为到目前为止，最简单的解决方案是将图像本身实际包含在标记中，然后添加一些样式让他们反应灵敏。

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

.img {
    padding-bottom: 50%;
}

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

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

于 2014-03-03T16:00:01.997 回答