如何使用图像调整其他图像的按钮，文本和图像？

Question

如何使放置在横幅上的按钮和图像具有响应性，例如当浏览器变小时图像变小，但按钮，图像和文本不会随横幅缩小。我可以添加什么来使我的代码正确收缩。这是我的css和html代码的一部分。任何对此的帮助都将非常感谢，谢谢！

#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>

Answer 1

您可以使用@media查询根据屏幕大小更改样式属性。

例如，当屏幕的最小宽度为.headshot且最大宽度为200px时，请将700px图片的大小更改为原始图片的20％。请运行代码段，然后切换到全屏以查看实际情况。

以下是resource，其中包含有关媒体查询的更多信息。

＆＃13;

＆＃13;

@media (min-width: 200px) and (max-width:700px) {
  .headshot {
    width:20%;
  }
}

#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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;