Question

我有一个div，其中的图像以像素为单位定义，里面有内容。我试图将secondContainer直接放在第一张图像的“洞”内。

#container {
  position: relative;
  height: 450px;
  width: 450px;
  border: 1px solid green;
  background-repeat: no-repeat;
  z-index: 0;
}
#backgroundImage {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  background-size: contain;
  background-image: url(http://thumb7.shutterstock.com/display_pic_with_logo/149584/149584,1206824658,1/stock-photo-old-japanese-coin-with-a-square-hole-isolated-on-white-10899223.jpg);
}
#secondContainer {
  position: absolute;
  height: 150px;
  width: 150px;
  transform: translate(150px, 140px) scale(0.6);
  border: 1px solid red;
  z-index: 2;
}
#image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 5px 0px 10px -5px black;
  background-image: url(http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2015/09/feeding_your_cat_a_healthy_diet_can_help_prevent_illness.jpg);
}

<div id="container">
  <div id="backgroundImage"></div>
  <div id="secondContainer">
    <img id="image">
  </div>
</div>
<style>

完全适合，但当我将其更改为

时

#container{
    position: relative;
    height: 100%;
    width: 100%;
    ...
}

使其伸展以适应浏览器窗口，第二个容器保持原样并且第一个容器伸展。我希望第二个容器能够完全适合那个位置。我怎样才能保持比例？

Answer 1

您需要将单位保持在%，尝试使用height and width。请查看以下代码段：

body,html {margin:0;height:100%;}
#container {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid green;
  background-repeat: no-repeat;
  z-index: 0;
  box-sizing:border-box;
}
#backgroundImage {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  background-size: contain;
  background-image: url(http://thumb7.shutterstock.com/display_pic_with_logo/149584/149584,1206824658,1/stock-photo-old-japanese-coin-with-a-square-hole-isolated-on-white-10899223.jpg);
  background-position:center;
}
#secondContainer {
  position: absolute;
  width: 20%;
  height:14%;
  left:50%;
  top:48%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  z-index: 2;
  background:url('http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2015/09/feeding_your_cat_a_healthy_diet_can_help_prevent_illness.jpg') no-repeat center;
  background-size:contain;
}

<div id="container">
  <div id="backgroundImage"></div>
  <div id="secondContainer"></div>
</div>

Answer 2

您需要为父级指定相对大小和位置，这意味着您需要使用百分比而不是像素。无论父母有多大，这个比例将保持不变，让孩子被纳入差距。经过一些实验，我发现以下百分比将解决您的问题。

#secondContainer {
  position: absolute;
  left: calc(40%);
  top: calc(40%);
  height: 20%;
  width: 20%;
  border: 1px solid red;
  z-index: 2;
 }

说明：

首先，您不必为此任务使用转换，因此我将其删除。
您希望子div的大小与父级成比例，在本例中为20％。通过这种方式，它将始终适应差距。
要使子div在父div中居中，请再次指定 top 和 left 属性的百分比。所需的值 50％ - 其大小的一半，在这种情况下，宽度和高度均为40％。

我将代码上传到fiddle。你会看到它没有完美居中 - 这是因为背面的图像底部有文字，因此间隙并不完全在中间。

更改div以适合浏览器大小时，Div的内容不会缩放？

2 个答案: