Responsive Circle-cropped photos

Question

在我的網站上，我創建了這些包含2-4行引用，小字體和小標題描述（或標題/副標題，無論）的小引用框，以及圓形裁剪照片位於盒子的左下角。我做了一個基本的js fiddle。

（它在我的實際代碼的方式是，我有一個SASS混入，到我班喂圓直徑）：

HAML

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

無論如何，現在我已經使網頁充分響應 - 除了這些circ樂照片。

問題是，如果頁面展開，我希望照片也展開，而且我不知道有什麼方法可以將新的理想直徑提供給我的課程，以便將它提供給sass mixin。所以我有一個可以完美縮放的頁面，但是對於這些太小或太大的照片。

任何想法如何做到這一點 - 有一個圓形裁剪照片，響應地調整和保持其在盒子左下角的相對位置（我認爲，這意味着它的絕對定位也必須改變） ？

Answer 1

答案最後是vw/vh。

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

如果我提出的圓尺寸基於百分比的，圓圈會變成橢圓的，除非所述容器的高度分別等於所述容器的寬度，這是幾乎沒有案例（100px x 200px容器中的80％x 80％圓實際上是80px x 160px）。

訣竅是通過使用vw單元使圓直徑與容器/窗口寬度單獨相關。這樣，圖像就會隨窗口調整大小，而不會扭曲成橢圓形。