リサイズ時のレスポンシブな画像スケーリング

Question

私は携帯電話で応答するウェブサイトを作っています。アイコンが付いた円を描く必要があります。私は円とイメージのアイコンを作った。しかし、ウィンドウのサイズを変更するとき、アイコンはサークル画像のような比率を維持しません。私はHTML5とCSS3を使用しています。

.theCircle { 
 
    position: relative; 
 
} 
 
#img1 { 
 
    height: auto; 
 
    width: 100%; 
 
} 
 
#img2 { 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 4%; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div class="theCircle"> 
 
    <img id="img1" src="circle.png"> 
 
    <img id="img2" src="pin.png"> 
 
</div>

は、ここでのdivとスタイリングを示す私のコードです。これは、ウィンドウが大きくてもアイコンが拡大しているときの円の拡大率を示す画像です。

どのようなアイデアをお願いしますか？

Answer 1

代わりの画像を使用して、純粋なHTMLとCSS

*{ 
 
    box-sizing:border-box; 
 
} 
 
.theCircle{ 
 
    width:50vw; 
 
    height:50vw; 
 
    border:2px solid black; 
 
    margin:auto; 
 
    border-radius:25vw; 
 
    position:relative; 
 
} 
 
.innerCircle{ 
 
    width:40vw; 
 
    height:40vw; 
 
    border:2px solid black; 
 
    margin:auto; 
 
    border-radius:25vw; 
 
    position:absolute; 
 
    top:5vw; 
 
    left:5vw; 
 
} 
 
#img2{ 
 
    position:absolute; 
 
    top:22vw; 
 
    left:0; 
 
    width:5vw; 
 
    height:5vw; 
 
}

<div class="theCircle"> 
 
    <div class="innerCircle"> 
 
    </div> 
 
    <img id="img2" src="https://cdn1.iconfinder.com/data/icons/ui-5/502/marker-512.png" /> 
 
</div>

Answer 2

あなたは完全に（あなたが古いブラウザをサポートしていない場合のみである場合）CSS3に頼ることができる場合は、この使用してVHとVWを修正することができるはずです。

例：アイテムの幅と高さを50vwに設定すると、常にビューポートの半分の幅と正確に同じ高さ（常に正方形）になります。

あなたのpngファイルなしで完全な例を書くことはできません。ブラウザサポートでvwとvhを確認する必要があります（たとえば、IE9 +が必要です）。