Question

我正在开展一个项目并陷入困境。我有一个16：9比例的背景图像。

body {
  margin: 0px;
  padding: 0px;
  background-image: url("background.jpg");
  background-size: 100%;
  position: absolute;
  background-repeat: no-repeat;
}
//for example:

.inventory {
  background-color: rgba(30, 30, 30, 0.5);
  top: 28%;
  left: 18%;
  font-size: 30px;
  text-align: center;
  color: white;
  width: 19%;
  height: 55.6%;
  overflow: auto;
  position:fixed
}

我现在想要的是，当我减小窗户的大小时，一切都停留在它的位置并且具有相对的高度和宽度。我现在面临的问题是，我用百分比定位的所有东西都与窗口的大小有关。但我想让一切都与图像的大小有关。希望你能帮助我！

Answer 1

如果您需要锁定宽高比，padding允许这样做，因为它总是相对于元素的宽度。在此示例中，您需要将background-image设置为替换background: green;，并将所有内容放在container-inner div

中

＆＃13;

.container {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  font-size: 0;
  position: relative;
}
.container-inner {
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: green;
}

＆＃13;

<div class="container">
  <div class="container-inner">
    
  </div>
</div>

＆＃13;

Answer 2

要使用background-image，您需要设置该元素的height。如果您调整窗口大小，width将根据窗口更改，但height将会修复，导致背景图片大小会增加，在这种情况下，您无法控制top，{{1 }}，left和right位置值......

因此，您需要在此处使用bottom而不是img ...并使用background-image将项目放在position:absolute值不是{{}的图片上1}} ...记得将%设置为其父容器

px

position:relative

尝试在此处修改 Fiddle

如何使一切与背景图像相关？

2 个答案: