css - 缩放屏幕 125%-175% 时图像变得疯狂

Question

我对 css 有疑问，因为我现在不接触 css，

我有一张正常缩放 (100%) 的图像:

但是放大 150% 时图像出错了:

已经尝试在互联网上找到任何文章，仍然没有，

谁能给我一个例子，说明如何让图像在三 Angular 形位置静止不动？

我用过的代码:

HTML

<div class="col-md-8 col-sm-8 col-xs-12 nopadding">
     <div class="boxtriangle" style="width: 100%;">
        <!--<img src="assets/images/bg-triangle.png" width="100%" height="100%" class="img-responsive" usemap="#umbrellamap" id="map_ID">-->
        <img src="assets/images/bg-triangle-Copy.png" usemap="#umbrellamap" style="width:100%; margin:0 auto;">
        <map name="umbrellamap" style="display:inline; width: 100%">
            <!-- coords="x,y,width,heigth" -->
            <area shape="circle" coords="146,317,62" href="health.html" alt="health"/>
            <area shape="circle" coords="282,317,35" href="legacy.html" alt="legacy" />
            <area shape="circle" coords="417,317,42" href="life.html" alt="life" />
            <area shape="circle" coords="217,204,42" href="retirement.html" alt="retirement" />
            <area shape="circle" coords="346,204,52" href="education.html" alt="education" />
            <area shape="circle" coords="282,95,42" href="investment.html" alt="investment" />
        </map>
             <div class="boxcircle1" id="investment">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                        <a href="investment.html">
                         <img src="assets/images/icon-invesment.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                        </a>
                     </div>
                 </div>
             </div>
             <div class="boxcircle2" id="retirement">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                         <img src="assets/images/icon-retirement.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                     </div>
                 </div>
             </div>
             <div class="boxcircle3" id="education">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                         <img src="assets/images/icon-education.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                     </div>
                 </div>
             </div>
             <div class="boxcircle4" id="health">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                         <img src="assets/images/icon-health.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                     </div>
                 </div>
             </div>
             <div class="boxcircle5" id="legacy">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                         <img src="assets/images/icon-legacy.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                     </div>
                 </div>
             </div>
             <div class="boxcircle6" id="life">
                 <div class="circle-all">
                     <div class="circle circle-2x">
                         <img src="assets/images/icon-life.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
                     </div>
                 </div>
             </div>
     </div>
     <div class="boxwordcontact" id="umbrellatrans19">But dont worry. we got it covered! <a href="" style="text-decoration: underline; color: #646263;" id="umbrellatrans20">contact us</a> <div id="umbrellatrans21">for further information</div>
     </div>
 </div>

类的CSS

.boxcircle1 {
    position: absolute; display: block; left: 31%; top: 9%;
}

.boxcircle2 {
    position: absolute; display: block; left: 22%; top: 38%;
}

.boxcircle3 {
    position: absolute; display: block; top: 38%; left: 40%;
}

.boxcircle4 {
    position: absolute; display: block; top: 68%; left: 12%;
}

.boxcircle5 {
    position: absolute; top: 68%; display: block; left: 31%;
}

.boxcircle6 {
    position: absolute; display: block; top: 68%; left: 50%;
}

.circle {
    border-radius: 50%;
    display: inline-block;
    background: #676664;
    cursor: pointer;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;

}

.circle:hover {
    background: #d0202b;
}

.circle:after {
    content: '';
    display: block ;
    position: absolute ;
    top: 0 ;
    bottom: 0 ;
    left: 0 ;
    right: 0 ;
    margin:-5px;
    border-radius: 50%;
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    border: 1px solid #d0202b;
}

.circle:hover:after {
    border: none;
}

.circle.active {
    background: #d0202b;

}

.circle.done {
    background: #6ca843;
}

.circle.done:hover:after {
    border: 1px solid #6ca843;
}

.circle-1x {
    height: 60px;
    width: 60px;
    text-align: center;
    font-size:26px;
}

.circle-2x {
    height: 75px;
    width: 75px;
    text-align: center;
    font-size:32px;
}
.circle-3x {
    height: 95px;
    width: 95px;
    text-align: center;
    font-size:45px;
}
.circle-4x {
    height: 115px;
    width: 115px;
    text-align: center;
    font-size:54px;
}

Answer 1

你的圈子有一个固定的大小，没有什么说的，他们应该根据他们的 parent 调整大小。

你的基类需要这样的东西(宽度是任意的):

.circle {
   width: 100%;
   height: auto;
}

阅读这里: https://www.w3schools.com/css/css_rwd_images.asp