Question

希望这个标题解释得非常好（考虑到我向你保证），无论如何我通过css将bg图像附加到身体上：

body,html {
  height: 100%;
}
body {
background: url("../images/header_lg.jpg") no-repeat;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
.fullwidth-head {
  position: relative;
  width: 100%;
  height: 100%;
}
.fullwidth-head-inner {
  position: absolute;
  top: 17%;
  left: 11%;
  width: 78%;
  height: 30%;
  background: #c5c5c5; /* just for visibility */
}

两个div应用“.fullwidth-head”，它是容器并且是相对的，默认情况下位于页面的最顶部，因为它是第一个div，在fullwidth-head中是另一个绝对定位的div“.full- width-head-inner“，现在它在桌面上运行得相当好，做了我想做的事情，但是当我切换到纵向视图时，由于与调整后的背景图像没有任何关系，所以它会转到底池，我做了通过添加一个与身体背景图像大小相同的空.png来考虑一个小黑客，以保持比例，它可能会起作用，但是由于它会应用额外的负载，我有点不愿意这样做。

Html在下面（不太感激）我已经有一段时间了，并且一直开始直到我得到我想要的结果：

<body>

<div class="fullwidth-head">
    <div class="fullwidth-head-inner">
    </div><!-- /.fullwidth-head-inner -->
</div><!-- /.fullwidth-head -->



<!-- js scripts in footer -->

那么除了使用blank.png修复相对容器div的大小之外还有其他方法我可以通过css获取我需要保持与body bg图像相同的宽高比的信息吗？

感谢

Answer 1

我认为您可能只是在寻找所谓的 padding-bottom hack 。

您需要知道图像比例。纵横比预先;但是，这是一个简单的方法来让一个元素像实际图像一样“调整大小”。

关于该主题的一些额外资源：

http://www.smashcompany.com/technology/the-bottom-padding-hack
http://andyshora.com/css-image-container-padding-hack.html https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack

身体背景图像与绝对+相对容器之间的大小关系CSS3

1 个答案: