[英]How to position a div with width, height on top of a contain background?
I have a background image (a car) and I want to make it responsive so the background is going to big the biggest size possible in all resolutions. 我有一个背景图片(汽车),我想使其具有响应性,因此背景在所有分辨率下都将尽可能大。 I managed to do that by setting
background-size
to contain
. 我没做到这一点通过设置
background-size
来contain
。
But I also need to place a div on top of a specific area in this image, I want a div to cover the car windshield. 但是我还需要在此图像中的特定区域上放置一个div,我想要一个div覆盖汽车挡风玻璃。
The issue is that I don't know how to calculate where the windshield is going to be due to contain
. 问题是我不知道如何计算挡风玻璃将要
contain
在何处。
Is there a way to predict where the background is going to be? 有没有办法预测背景将在哪里? How can I cover the windshield with a div?
如何用div覆盖挡风玻璃?
If that's not possible, would there be some alternative to contain
that would keep the image as big as possible just like the way contain
handles it? 如果这是不可能的,会有一些替代方案
contain
将保持图像尽可能大只是喜欢的方式contain
处理它?
Here's a CodePen I made to simulate my scenario: https://codepen.io/brunolm/pen/bKdrGz 这是我为模拟自己的情况而制作的CodePen: https ://codepen.io/brunolm/pen/bKdrGz
The challenge about the contain value is that it handles 2 different scenarios. 关于包含值的挑战是它处理两种不同的情况。 If the aspect ratio of the image is wider than the container, the image will have a height of 100%, and a difficult to calculate width.
如果图像的纵横比比容器宽,则图像的高度将为100%,并且宽度难以计算。 In the opposite case, the width will be 100%.
在相反的情况下,宽度将为100%。
So we need to handle the 2 different posibilities in a different way. 因此,我们需要以不同的方式处理这两种不同的可能性。
Luckily, you are using 100% of the browser, so that we can use a media query on the aspect ratio of the browser window. 幸运的是,您正在使用100%的浏览器,因此我们可以对浏览器窗口的宽高比使用媒体查询。
Then, calculate the position of the rectangle using the relevant viewport units. 然后,使用相关的视口单位计算矩形的位置。
To make the media query change visiblem, I have also modified the color of the div 为了使媒体查询更改可见,我还修改了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>
You need to add the img and the area div to the same container. 您需要将img和area div添加到同一容器中。 Then, use percentages to position them correctly inside the container.
然后,使用百分比将其正确放置在容器内。 By using percentages in the container, when the container is resized, the position of the elements should stay in the same place since they will be responsive in relation to the container and not the page:
通过在容器中使用百分比,在调整容器大小时,元素的位置应保持在同一位置,因为它们将相对于容器而不是页面做出响应:
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>
I'm using a trick here to center the area div in the container. 我在这里使用技巧在容器中将区域div居中。 You give the div a
left: 50%
and then set a negative left margin that is equal to half the width. 给div
left: 50%
,然后设置负的左边距,等于宽度的一半 。 So since the width of the area div is 70%, we can use left: 50%; margin-left: -35%;
因此,由于区域div的宽度为70%,因此我们可以使用
left: 50%; margin-left: -35%;
left: 50%; margin-left: -35%;
to center it. 居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.