缩放到背景图像大小 [英] scale div to background image size

问题描述

我有一张图片，需要将div放在链接的顶部。当我最初创建网站时，我做得很好，但现在我的任务是响应，所以我不能再使用-top和left值来定位叠加div，因为它们不随图像一起移动。

尝试将图像作为背景图像，以便叠加层的位置可以设置并包含在父容器中。

我曾尝试使用背景大小属性（封面，包含，100％），但它们不会让div显示其高度的所有400像素。

设置最大高度，使用自动或100％都不起作用。

我会使用min-height，但div不会在移动设备上缩小。 / p>

有谁知道我可以如何让我的父级div成为背景图片的完整大小？

解决方案

{
position：rel ative;
top：2％;剩余
：2％;
}

I have an image that I need to put divs on top of for links. I did this fine when I initially created the website, but now I am tasked with making it responsive, so I can no longer use -top and left values to position the overlay divs because they don't move with the image.

Trying to put the image as a background image so that the position of the overlays can be set and contained within the parent container.

I have tried using the background size property (cover, contain, 100%), but they will not make the div show all 400px of its height.

setting a max height, using auto, or 100% do not work either.

I would use min-height, but then the div would not scale down on mobile devices.

Does anyone know how I can get my parent div to be the full size of the background image?

解决方案

One recommendation is to position the links using top and left percentages, ie:

#link1 {
     position: relative;
     top:2%;
     left:2%;
}

这篇关于缩放到背景图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！