3

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

（它在我的实际代码中的工作方式是我有一个 SASS 混合，我的类提供圆直径。）：

哈姆

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

粗鲁的

.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。所以我有一个完美缩放的页面，但是对于这些太小或太大的照片。

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

4

1 回答 1

1

答案最终是 vw/vh。

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

如果我基于百分比制作圆形尺寸，则圆圈会变成椭圆，除非容器的高度等于容器的宽度，这几乎从来没有发生过（100px 中的 80% x 80% 圆圈） x 200px 容器实际上是 80px x 160px）。

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

于 2013-07-24T21:02:43.913 回答