如何在容器背景上放置宽度，高度的div？
我有一个背景图像(一辆汽车)，我想让它有响应性，这样背景就会变得很大，在所有分辨率下都是最大的。通过将background-size设置为contain，我设法做到了这一点。
但我还需要在这个图像中的特定区域上放置一个div，我想要一个div来覆盖汽车挡风玻璃。
问题是，我不知道如何计算由于contain造成的挡风玻璃会在哪里。
有没有办法预测背景会在哪里？如何用div覆盖挡风玻璃？
如果这是不可能的，是否有一些替代contain，可以保持图像尽可能大，就像contain处理它的方式一样？
下面是我用来模拟我的场景的一个CodePen：https://codepen.io/brunolm/pen/bKdrGz
回答 2
Stack Overflow用户
发布于 2018-06-01 04:47:59
contain值的挑战在于它可以处理两种不同的场景。如果图像的纵横比比容器宽，则图像的高度将为100%，并且难以计算宽度。在相反的情况下，宽度将是100%。
因此，我们需要以不同的方式处理这两种不同的可能性。
幸运的是，您使用的是100%的浏览器，因此我们可以在浏览器窗口的纵横比上使用媒体查询。
然后，使用相关的视口单位计算矩形的位置。
为了使媒体查询可见，我还修改了div的颜色
html, body, .bg {
width: 100%;
height: 100%;
margin: 0;
}
.bg {
background: url('https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg') no-repeat;
background-position: center;
background-size: contain;
}
.area {
background: rgba(200, 200, 200, .5);
position: absolute;
position: absolute;
top: calc(50% - 43vh);
height: 26vh;
left: calc(50% - 54vh);
width: 110vh;
}
/* portrait mode */
@media screen and (max-aspect-ratio: 8/5) {
.area {
background-color: rgba(200,0,0,0.5);
top: calc(50% - 28vw);
height: 17vw;
left: 14vw;
width: 71vw;
}
}<div>current screen size: <span id="w"></span></div>
<div class="bg">
<div class="area"><!-- should cover windshield at all times --></div>
</div>
Stack Overflow用户
发布于 2018-06-01 02:04:53
您需要将img和area div添加到同一个容器中。然后，使用百分比在容器内正确定位它们。通过使用容器中的百分比，当容器调整大小时，元素的位置应该保持在相同的位置，因为它们将相对于容器而不是页面进行响应：
html, body {
width: 100%;
height: 100%;
}
.car {
width: 50%;
display: block;
margin: 0 auto;
position: relative;
}
.car img {
width: 100%;
}
.area {
width: 70%;
height: 30%;
background: rgba(200, 200, 200, .5);
position: absolute;
bottom: 0;
right: 0;
top: 5%;
left: 50%;
margin-left: -35%;
}<div class="car">
<img src="https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg" />
<div class="area"><!-- should cover windshield at all times --></div>
</div>
我在这里使用了一个技巧来居中容器中的区域div。您给div一个left: 50%，然后设置一个等于half宽度的负左边距。因此，由于区域div的宽度为70%，我们可以使用left: 50%; margin-left: -35%;将其居中。
https://stackoverflow.com/questions/50630106
复制相似问题