html - Bootstrap - 图像上的固定位置

Question

我需要有关 css/bootstrap 中图像上 anchor 图标的帮助。我尝试了几乎所有看起来都有效的东西，但是当我调整窗口大小时，图标漂浮在图像上并且没有固定在同一个地方。

我的代码

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
    
    <div class="col-sm">
        <!-- Image Map Generated by http://www.image-map.net/ -->
        <img src="https://www.roomsketcher.com/wp-content/uploads/2015/11/RoomSketcher-House-Floor-Plans.jpg" usemap="#image-map" id="roomSelector" style="position:relative; display: block;">
        <map name="image-map">
            <area target="" alt="LivingRoom" title="LivingRoom" href="" coords="44,215,215,217,214,395,243,394,242,555,42,555" shape="poly">
            <area target="" alt="Hallway" title="Hallway" href="" coords="213,216,296,218,297,312,390,314,390,394,216,394" shape="poly">
            <area target="" alt="Room103" title="Room103" href="" coords="392,395,392,557,244,555,244,394" shape="poly">
            <area target="" alt="FireRoom" title="FireRoom" href="" coords="393,394,609,556" shape="rect">
            <area target="" alt="Garage" title="Garage" href="" coords="392,392,605,88" shape="rect">
            <area target="" alt="TechnicRoom" title="TechnicRoom" href="" coords="297,217,389,312" shape="rect">
        </map>
        
         <i class="fa fa-fw fa-bolt" style="left: 50%;
    top: 50%;
    position: absolute;
    margin-top: 0px;
    margin-left: 0px;"></i>
    </div>

Answer 1

你应该试试这个

<div class="col-sm">
    <!-- Image Map Generated by http://www.image-map.net/ -->
  <div class="wrapper">
    <img src="https://www.roomsketcher.com/wp-content/uploads/2015/11/RoomSketcher-House-Floor-Plans.jpg" usemap="#image-map" id="roomSelector" style="position:relative; display: block;">
    <map name="image-map">
        <area target="" alt="LivingRoom" title="LivingRoom" href="" coords="44,215,215,217,214,395,243,394,242,555,42,555" shape="poly">
        <area target="" alt="Hallway" title="Hallway" href="" coords="213,216,296,218,297,312,390,314,390,394,216,394" shape="poly">
        <area target="" alt="Room103" title="Room103" href="" coords="392,395,392,557,244,555,244,394" shape="poly">
        <area target="" alt="FireRoom" title="FireRoom" href="" coords="393,394,609,556" shape="rect">
        <area target="" alt="Garage" title="Garage" href="" coords="392,392,605,88" shape="rect">
        <area target="" alt="TechnicRoom" title="TechnicRoom" href="" coords="297,217,389,312" shape="rect">
    </map>

     <i class="fa fa-fw fa-bolt icons_pos"></i>
</div>
  </div>

和

    .wrapper {
    position:relative;
     display:inline-block;
    }

    .icons_pos {
    position: absolute;
    right: 0;
    top: 50%;
    }