图像边界半径

Question

我在离子famework 的帮助下创建了android应用程序。 我有这个UI的问题。 我在离子中使用lists来显示商店给出的今天的交易。

我正在通过属性border-radius:100%将缩略图设置为圆形，但是当放置矩形图像时，我的缩略图会混乱。当我使用sqare图像时它很好。但我正在创建这个应用程序，必须支持所有形状的图像。 查找下面的屏幕截图，了解矩形图像如何响应border-radius:100%

我想让我的缩略图呈圆形而不会被拉伸。预期列表的图像如下

有没有办法让离子框架中的缩略图成为圆形？

<div class="list">

    <!--.....................loop........................................................-->
            <a class="item item-icon-right item-thumbnail-left" href="#">

                <img style="border-radius: 100%;"  src="img/sample.jpg">
                <h2>HEADINGG</h2>
                <p>Details : Hey guys i saw that there was no thread for p300, so i decided to make one (this is the support and development thread) Do this at your own risk 1=Root your funbook It is rooted but sometimes it is not rooted so you must visit this page</p>
                <i class="icon ion-chevron-right stable"></i>
            </a>            
    <!--.....................loop........................................................-->    
        </div>

我想我必须对CSS做点什么。我不知道该怎么做。

Answer 1

裁剪您希望在页面中以圆形显示的图片的 square 部分会更好。这是因为border-radius:100%;就像方形图像的魅力一样。

这是 Live DEMO ！

Answer 2

尝试仅使用头像

似乎avatar css是这样的，

.avatar {
    border-radius: 95px;
}

<img class="avatar"  src="img/sample.jpg">

我想你也需要删除thumnail clases 你可以在这里编辑

Answer 3

事实： 只有方形对象将呈现为CSS border-radius：100％或50％。

所以你必须给图像本身提供相同的宽度和高度。

......或者我只是不明白你的问题^^

Answer 4

我的建议是设置border-radius的高度和宽度。

<img src="" class="icon-round"></div>

    .icon-round {
       border-radius: 50%;
       width: 100px;
       height: 100px; 
    }