在我的网站上,我创建了这些小引用框,其中包含 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。所以我有一个完美缩放的页面,但是对于这些太小或太大的照片。
知道如何做到这一点 - 让一张圆形裁剪的照片响应地调整大小并保持其在框左下角的相对位置(我认为这意味着它的绝对定位也必须改变)?