Question

Div 1设置有bg，其图像中有一个窗口。我想在这个窗口的位置对齐一个div并缩放它，但是当我按宽度缩放浏览器时，它会不断地上下移动。

对不起，如果有一个小问题可以解决，我对CSS还是陌生的，我找不到这个问题的答案：/

我通过搜索从小提琴中学到了东西...所以我希望我做对了：

    .bg {
    position: absolute;
    width: 100%;
  z-index : 1;
    height: 300%;


    overflow: hidden;
    visibility: visible;

    animation: fadein 2s;

  background-color: blue;
    background-position: top-left;
    background-repeat: no-repeat;
    background-size: 100% auto;
 }

 #display{
   z-index : 2;
    position: relative;

    width: 25%;
    height: 25%;
    top: 50%;
    left: 50%;
    border-style: solid;
    overflow:hidden;

  background-color: red;

}

（URL->请参阅编辑）想象蓝色div中间的一个窗口。 div尚未在高度和宽度上对齐，但是如果可以，在缩放容器时div会挤压，但不会跟随新的x位置。

编辑： https://jsfiddle.net/acf8unsj/7/ 将实际窗口设为bg并对齐div。现在，您只需按下窗口即可了解我的意思。

另外，高度为300％，因此页面可滚动（实际背景为4032px高度jpg）

Answer 1

尽管问题描述得不好，但我知道你想要什么。您无法通过绝对排名和百分比来实现这一目标。最好的方法是使用图片映射：

<img src="http://via.placeholder.com/600x500" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="" coords="271,167,559,337" shape="rect">
</map>

有许多在线图像地图生成器可简化您的工作。

例如：https://www.image-map.net/

，然后使用jquery插件为其着色。例如：

https://www.jqueryscript.net/other/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight.html

对齐嵌套的div和缩放而无需移动

1 个答案: