将图像尺寸用于父对象

Question

我正在创建一个花园的响应式设计，在右上角的地图上。地图固定在位，地图上有标签。

我想通过设置地图的框架来维护地图基础的比例，并填充地图和标签。

标签的位置也是地图的相对位置（百分比数字），这样当页面缩放时，地图和标签将保持相同的位置。

但是，由于我只为“地图”设置了“宽度”，因此无法使用百分比编号作为高度，也无法为标签设置“顶部”变量。

有没有办法将对象作为 img 的孩子？

如果没有，我可以先获取图像的尺寸，然后将其放入“ .map ”类中，以便 img 的父级完全相同 img ？ （这很重要，因为有许多带有基本地图相对坐标的标签。）

html代码：

    <div class="maps">
            <img id="mapbase" src="assets/vector_masterplan.jpg">
            <div id="maplabel" style="top:20%; left:28.5%;">Gazebo</div>
    </div>

css代码：

.maps {
   position: fixed;
   right: 3%;
   top: 6%;
   vertical-align: middle;
   width:30%;
}
.maps #mapbase {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0.7;
}

Answer 1

通过以下帖子解决这个问题：

Responsively change div size keeping aspect ratio

我首先提取地图的暗淡并找到比率。 然后设置＆＃34; .maps＆＃34;使用该比率的div。