html - 响应式圆形裁剪照片

Question

在我的网站上，我创建了这些小报价框，其中包含 2-4 行报价、署名和署名描述(或标题/副标题等)，以及一张完全位于左下角的圆形裁剪照片的盒子。我已经完成了基本的 js fiddle .

(它在我的实际代码中的工作方式是我有一个 SASS mixin，我的类将圆直径提供给它。):

火腿

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

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

问题是，如果页面扩大，我希望照片也扩大，而且我不知道有什么方法可以将新的理想直径提供给我的类(class)以将其提供给 sass mixin。所以我有一个可以完美缩放的页面，但对于这些照片来说要么太小要么太大。

知道如何做到这一点——让一张裁剪成圆形的照片响应地调整大小并保持其在框左下角的相对位置(我认为这意味着它的绝对定位也必须改变)？

Answer 1

答案最终是 vw/vh。

http://css-tricks.com/viewport-sized-typography/

如果我将圆尺寸设为基于百分比，那么圆将变成椭圆，除非容器的高度等于容器的宽度，而这种情况几乎永远不会发生(80% x 80% 的圆在 100 像素 x 200 像素的容器中实际上是 80 像素 x 160 像素)。

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