响应式布局：覆盖绝对定位注释的图像

Question

我有一个图像，注释点覆盖在它们之上。这些注释是指向相关内容的链接（单击一个并显示其相关内容等）。

该网站具有响应性（duh，2014年），但在考虑执行此操作时遇到了麻烦，而没有精心定位四个注释中的每一个。

我已经考虑了图像地图但是它的2014年（希望有更好的方法），并且布局变得更加复杂，图像地图和内容要覆盖它。

目前 - 在使用Bootstrap时，绝对使用百分比设置注释位置（EX：top：25％等）但是这会变得很麻烦，因为它会缩小这些百分比会变得歪斜。

开放新方法来执行此挑战。

期望结果的图像。但当然是敏感的。

HTML

<div class="section jumbotron product" id="features">
    <img class="img-responsive" src="images/product@2x.jpg" alt="">
    <div class="container key-features">
      <div class="row">
      <!-- col-lg-8 col-md-8  -->
        <div class="col-xs-12 col-sm-12 col-md-8 features-anchor">
          <ul>
            <li class="is-active"><a class="col-md-2 feature-1 " href="#power">1</a></li>
            <li><a class="col-md-2 feature-2" href="#love">2</a></li>
            <li><a class="col-md-2 feature-3" href="#fear">3</a></li>
            <li><a class="col-md-2 feature-4" href="#hope">4</a></li>
          </ul>
        </div>
        <!-- col-lg-4 col-md-4  -->
        <div class="col-xs-12 col-sm-12 col-md-4">
          <h1>Key Features</h1>
          <div class="features">
            <div id="power" class="feat-description col-xs-12 col-sm-6 col-md-12 is-active">
              <h2>1. Power</h2>
              <p>Using FFT, analyze and compare the spectrum of any EEG two channels and apply Wavelet Subband breakdown to inspect the individual known frequency subband signals (Delta, Theta, Alpha, Beta and Gamma) making up the channel data.</p>
            </div>
            <div id="love" class="feat-description col-xs-12 col-sm-6 col-md-12">
              <h2>2. Love</h2>
              <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
            </div>
            <div id="fear" class="feat-description col-xs-12 col-sm-6 col-md-12">
              <h2>3. Fear</h2>
              <p>Fry, you can't just sit here in the dark listening to classical music. What are you hacking off? Is it my torso?! 'It is!' My precious torso! Ooh, name it after me! Bender, I didn't know you liked cooking. That's so cute. Fry! Stay back! He's too powerful! The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.</p>
            </div>
            <div id="hope" class="feat-description col-xs-12 col-sm-6 col-md-12">
              <h2>4. Hope</h2>
              <p>Bespoke aesthetic hoodie, gastropub cliche roof party Blue Bottle Cosby sweater master cleanse irony wolf. Echo Park Pitchfork fap shabby chic mixtape. American Apparel fanny pack Vice polaroid, cray Wes Anderson Blue Bottle selvage chillwave mixtape forage sustainable ethical pour-over. Ethnic pour-over Carles, Brooklyn scenester Marfa sriracha.</p>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </div>

CSS

.product img {width: 100%;}

.product {
    color: $white;
    .container {width: 100%;}
    .row {padding: 40px 20px;}
}

.features-anchor {
    position: relative;
    ul {
        padding:0;
        margin: 0;

        li {
            display: inline-block;

            a {
                @include vendor-prefix(border-radius, 50%);
                @include vendor-prefix(transition, 300ms all);
                position: absolute;
                display: block;
                height: 50px;
                width: 50px;
                background: $pico-orange;
                color: $white;
                font-size: em(24px);
                text-align: center;
                line-height: 50px;

            }
            a:hover {
                text-decoration: none;
                background: darken($pico-orange, 10%);
            }
        } 
    }
}
.feature-1 {
    top: 70px;
    left: 400px;
}
.feature-2 {
    top: 190px;
    left: 600px;
}
.feature-3 {
    top: 350px;
    left: 500px;
}
.feature-4 {
    top: 300px;
    left: 80px;
}

.feat-description   {
    @include vendor-prefix(transition, opacity 600ms);
    display: block;
    opacity: 1;
}


.features {color: $black;}


.product h1 {
    color: $white;
    margin-top: -60%;
    font-size: em(34px);
}

.features {
    margin-top: 100px;
}

// phone screen
@media (max-width: $screen-sm){
    .features-anchor {
        display: none;
    }
}

// phone to large ipad
@media (min-width: $screen-xs-min) and (max-width: $screen-md){ 
        .features-anchor {
            display: none;
        }
        .features {
            color: $black;
        }

        .product h1 {
            margin-top: -320px;
            font-size: em(80px);
            color: $white;
        }

        .features {
            margin-top: 230px;
        }
}

// ipad-desktop and up
@media (min-width: $screen-md){
    .product h1 {
        font-size: em(55px);
        text-align: left;
    }
    .key-features {
        position: absolute;
        top: 0;
        height: 560px;
        overflow: hidden;
    }
    .features {
        color: $white;
        h2 {
            display: inline-block;
            font-size: em(36px);
            font-weight: 600;
        }
        p {
            font-size: em(24px);
            line-height: 1.5;
        }
    }
    .feat-description {
        position: absolute;
        top: 100px;
        opacity: 0;
    }
    .feat-description.is-active {
        opacity: 1;
    }

    .features-anchor {
        position: relative;
        ul {
            padding:0;
            margin: 0;

            li {
                display: inline-block;

                a {

                    @include vendor-prefix(border-radius, 50%);
                    @include vendor-prefix(transition, 300ms all);
                    position: absolute;
                    display: block;
                    height: 50px;
                    width: 50px;
                    background: $pico-orange;
                    color: $white;
                    font-size: em(24px);
                    text-align: center;
                    line-height: 50px;

                }
                a:hover {
                    text-decoration: none;
                    background: darken($pico-orange, 10%);
                }
            } 
        }
    }
    .feature-1 {
        top: 186%;
        left: 53%;
    }
    .feature-2 {
        top: 580%;
        left: 75%;
    }
    .feature-3 {
        top: 1130%;
        left: 65%;
    }
    .feature-4 {
        top: 920%;
        left: 12%;
    }
}

    /* Medium Devices, Desktops */
    @media (min-width : 992px) {

            .product    h1 {
                margin-top: 0;
                line-height: 1.2;
                font-size: em(44px);
            }
            .features-anchor {
                display: block;
            }

    }

        /* Large Devices, Wide Screens */
    @media (min-width : 1200px) {
        .product    h1 {
                font-size: em(55px);
            }
            .feature-1 {
                top: 296%;
                left: 53%;
            }
            .feature-2 {
                top: 780%;
                left: 75%;
            }
            .feature-3 {
                top: 350px;
                left: 65%;
            }
            .feature-4 {
                top: 300px;
                left: 10%;
            }
    }

JS

目前只是点击

触发显示内容

$('.features-anchor').on('click', 'a', function(e){
        e.preventDefault();
        var $this = $(this);
        var $link = $this.attr('href');


        if(!$this.hasClass('is-active')){
            // $('.feat-description').removeClass('is-active');
            // $this.addClass('is-active');

            $this.addClass('is-active');
            $this.addClass('is-active').parent().siblings().find('a').removeClass('is-active');
            $($link).siblings().removeClass('is-active');
            $($link).fadeIn().addClass('is-active');
        }
    });