矩形img标签的响应式图像圈？

Question

这是我拥有的仅适用于背景图像的代码。我希望 html 中的图像标签的效果相同。

我想要的是

<div class="pic">
    <img src="image.png" />
</div>

这是实际的代码。工作codepen。

HTML

<div class="pic"></div>

CSS

.pic {
  background: url("http://i.imgur.com/Q3DVhY0.jpg") no-repeat;
  position: relative;
  width: 100%; 
  max-width: 300px;
  border-radius: 50%; 
  background-size: cover;
 display: block;
  background-position: center;
}
.pic:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

如何将此效果应用于 html 中的图像标签？我试图对此进行研究，但我找不到任何东西......我知道如果图像是方形的会更容易，但我希望将效果应用于只有 html 和 css 而没有 javascript 的矩形图像。

Answer 1

这就是你要找的吗？ http://jsfiddle.net/DIRTY_SMITH/Lmh3nt6p/1/

.pic > img{ 
  position: relative;  
  max-width: 300px;
  border-radius: 200px; 
}

这是你的圈子，哈哈！ http://jsfiddle.net/DIRTY_SMITH/Lmh3nt6p/5/