Question

在我的网站上，我创建了这些小报价框，其中包含2-4行引号，副行和副行描述（或标题/副标题，无论如何）和圆形裁剪照片，绝对位于左下角的盒子。我做了一个基本的js fiddle。

（它在我的实际代码中的工作方式是我有一个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。所以我有一个完美缩放的页面，但对于这些太小或太大的照片。

任何想法如何做到这一点 - 有一个圆形裁剪的照片，响应性地调整大小并保持其在盒子左下方的相对位置（我认为，这意味着它的绝对定位也必须改变）？

Answer 1

答案最终是vw / vh。

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

如果我将圆尺寸设为百分比，则圆圈将变为椭圆，除非容器的高度等于容器的宽度，这几乎不是这种情况（80％x 80％圆圈）在100px x 200px容器中实际上是80px乘160px。

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

响应式圆形裁剪照片

1 个答案: