调整大小时响应式图像缩放

Question

我正在建立一个应该在手机上响应的网站，我需要制作一个带有图标的圆圈。我把圆形变成了图像和图标。但是，在调整窗口大小时，图标不会像圆形图像一样保持其比例。我正在使用HTML5和CSS3。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我的代码，显示了div和样式。这是一张图片，显示当窗口较大但图标不是时，圆圈是如何放大的。

有什么想法吗？

Answer 1

如果您完全可以依赖CSS3（只有在您不支持旧浏览器的情况下才会这样），您应该能够使用vh和vw来解决这个问题。

例如：如果将项目的宽度和高度都设置为50vw，它将始终是视口宽度的一半，并且高度完全相同（始终为正方形）。

不能在没有png文件的情况下编写完整的示例，你应该检查vw和vh的浏览器支持（例如你需要IE9 +）。

Answer 2

不使用图像，而是使用纯html和css

＆＃13;

＆＃13;

*{
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;