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

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+）。