border-radius无法使嵌套在a标签内的img元素变为圆形

Question

1. 发现 a 标签内的元素高度和img高度不相等

    <a href="#">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3979058804,967901392&fm=26&gp=0.jpg" alt="美" width=200>
    </a>

2.
使用border-radius无法使该img标签变为圆形

<div class="alice">
  <div style="padding: 10px;opacity: 0.8;">
    <a href="#">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3979058804,967901392&fm=26&gp=0.jpg" alt="美" width=200 style="border-radius: 10px"></a>
  </div>
  <div class="topic">
    人物
  </div>
</div>

jsfiddle

希望各位大佬们可以帮忙解答下，感激不尽。

Answer 1

明显是高度不够了，你人物两个字把图片下边遮住了，去掉看看

Answer 2

我想说。图片本来就不是1:1的，用border-radius:50%是不可能把图片变成圆形的，只会变成椭圆。
至于第一个问题，是因为a是inline元素，而img是inline-block。a是不会被img撑开的。

Answer 3

是想这样的意思？

a{

        display: block;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
    }
    img{
        height: 100%;
    }

Answer 4

border-radius:50%用来处理图片比例为1：1的，不是1：1的不可以

Answer 5

希望题主以后遇到这种基础的问题，可以去仔细研究一下属性，而不是上来就提问。