-1
ブラウザのサイズを小さくした場合と同じように、ボタンやイメージやテキストがバナーで縮小するのではなく、バナー上に配置されたボタンやイメージを反応的にすることができます。これをすべて正しく縮めるようにするには、私のコードに何を追加できますか？ここに私のCSSとHTMLコードの一部です。これについての助けは非常に感謝されるでしょう、ありがとう！あなたは、画面サイズに合わせてスタイル属性を変更するには@mediaクエリを使用することができますボタン、テキスト、イメージを別のイメージ上にレイアウトしてイメージのサイズを変更するにはどうしたらいいですか？
#putimage {
display: inline-block;
position: relative;
}
#button1 {
position: absolute;
bottom: 25%;
right: 38%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button2 {
position: absolute;
bottom: 25%;
right: 22%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#button3 {
position: absolute;
bottom: 25%;
right: 3.4%;
background-color: transparent;
color: black;
border: 2px solid #ffffff;
font-size: 35px;
color: white;
}
#text1 {
position: absolute;
bottom: 25%;
right: 75%;
}
.headshot {
position: absolute;
top: 60px;
left: 47px;
z-index: 3;
}
.name {
position: absolute;
top: 71%;
left: 7.8%;
}
.photos {
position: absolute;
top: 38%;
left: 51.6%;
font-size: 220%;
}
.photoscount {
position: absolute;
top: 28%;
left: 55.8%;
font-size: 220%;
}<div id="putimage">
<img src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21875637_167049423848751_1262488588_o.jpg" width="100%" height="500px" />
<input type="button" id="button1" value="Subscribe">
<input type="button" id="button2" value="Message">
<input type="button" id="button3" value="VIP Photos">
<img class="headshot" src="http://partneredaffiliates.com/wp-content/uploads/2017/09/21767500_167049813848712_2048841584_n.png">
<div class="name">
<font size="30" color="white">ELO <strong>KITTY</strong></font>
</div>
<div class="photos">
<font color="white">PHOTOS</font>
</div>
<div class="photoscount">
<font color="white">72</font>
</div>
</div>