Html 圆形裁剪照片

在我的网站上，我创建了这些小报价框，其中包含2-4行报价、署名和署名描述（或标题/副标题，无论什么），以及一张圆形裁剪的照片，绝对位于框的左下角。我做了一个基本的测试

（它在我的实际代码中的工作方式是我有一个SASS mixin，我的类将圆的直径馈送到它）：

haml

.circle-photo-div{ style: "background: url(#{photo_url})" }

sass

.circle-photo-div
  @include circle-photo(110)
  position: absolute
  bottom: -19%
  left: -7%

@mixin circle-photo($diameter)
  width: #{$diameter}px
  height: #{$diameter}px
  border-radius: #{$diameter / 2.0}px
  -webkit-border-radius: #{$diameter / 2.0}px
  -moz-border-radius: #{$diameter / 2.0}px
  margin: 1em auto
  background-size: cover
  background-repeat: no-repeat
  background-position: center center
  -webkit-border-radius: 99em
  -moz-border-radius: 99em
  border-radius: 99em
  border: 5px solid white
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8)

无论如何，现在我已经让页面完全响应了——除了这些圆形照片

问题是，如果页面扩展，我希望照片也扩展，我不知道如何将新的理想直径提供给我的类，以将其提供给sass mixin。所以我有一个可以完美缩放的页面，但是这些照片要么太小，要么太大

---

你知道如何做到这一点吗？制作一张圆形裁剪的照片，它可以相应地调整大小并保持其在方框左下角的相对位置（我认为这意味着它的绝对位置也必须改变）

答案最终是大众/大众

如果我以百分比为基础，圆圈将变成椭圆，除非容器的高度等于容器的宽度，这几乎从来都不是事实（100px x 200px容器中的80%x 80%圆圈实际上是80px x 160px）

---

诀窍是通过使用vw装置，使圆的直径成为容器/窗口宽度的函数。这样，图像就可以随窗口调整大小，而不会扭曲成椭圆形。

您好，您能给出一个完成工作方法的示例吗？