身体背景图片与绝对+相对容器CSS3之间的尺寸关系

Question

Hopefully the title explains it pretty good (took some thinking i assure you), anyway i have a bg image attached to body by css: 希望标题解释得很好（我想了一下，向您保证），无论如何，我都会通过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 */
}

Two divs are applied ".fullwidth-head" which is the container and is relative and at the very top of the page by default as it is the first div, inside fullwidth-head is another absolute positioned div ".full-width-head-inner", now it works pretty good on desktop and does what i want it to do, but sure as i switch to portrait view it goes to pot due to really having no relation to the background image being resized, i did think of a small hack by adding an empty .png the same size as the body background image to keep the ratio and it would probably work, however im a bit reluctant to do this because of the extra load it would apply. 应用两个div容器“ .fullwidth-head”，它是相对的，默认情况下位于页面的顶部，因为它是第一个div，在fullwidth-head内是另一个绝对定位的div“ .full-width-head” -inner”，现在它可以在桌面上正常工作，并且可以执行我想要的操作，但是可以肯定的是，当我切换到纵向视图时，由于确实与调整后的背景图像没有任何关系，所以它进入了锅中，我确实想到了通过添加一个与正文背景图像大小相同的空.png来保持比例，这可能会起作用，但是我有点不愿意这样做，因为会施加额外的负载。

Html is below (not much thankfully) i have been at this for sometime and keep starting over until i get the required result that i am after: HTML是低于（不太感谢）我已经有一段时间了，并一直重新开始，直到我得到了我所要求的结果：

<body>

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



<!-- js scripts in footer -->

So is there a way other than using a blank.png to fix the size of the relative container div where i can actually via css get the info i need to keep the same aspect ratio as the body bg image? 因此，除了使用blank.png固定相对容器div的大小之外，还有其他方法可以在其中实际通过css获得我需要保持与主体bg图像相同的长宽比的信息吗？

thanks 谢谢

Answer 1

I think you might simply be looking for what's known as the padding-bottom hack . 我认为您可能只是在寻找所谓的padding-bottom hack 。

You need to know the image proportions resp. 您需要知道图像比例。 aspect ratio beforehand; 长宽比 but then it's an easy way to get an element to "resize" the same way as a real image would. 但是，这是使元素与真实图像一样“调整大小”的简单方法。

A few additional resources on that subject matter: 关于该主题的一些其他资源：

http://www.smashcompany.com/technology/the-bottom-padding-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 http://andyshora.com/css-image-container-padding-hack.html https://www.smashingmagazine.com/2013/09/sensitive-images-performance-problem-case-study/#the-padding-底层黑客

身体背景图片与绝对+相对容器CSS3之间的尺寸关系

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-08 21:26:46

身体背景图片与绝对+相对容器CSS3之间的尺寸关系

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-08 21:26:46

解决方案1
1 已采纳 2016-09-08 21:26:46