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/

响应式图片圈为矩形img标签？

1 个答案: