I have implemented quote boxes on my website that feature a 2-4 line quote, a byline with a description or title/subtitle, and a circularly cropped photo. The photo is positioned at the bottom left of the box using absolute positioning. You can view a simple demonstration in this js fiddle.
In my actual code, I use a SASS mixin to set the circle diameter:
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)
However, I am facing an issue with making these circle photos responsive when the page size changes. Currently, they do not resize proportionally along with the page content. Any suggestions on how to achieve this functionality so that the circle-cropped photos adjust their size and maintain their relative positioning at the bottom left of the box?