图像边框半径

Question

我在 ionic famwork 的帮助下创建 android 应用程序。 我在 UI 上遇到了这个问题。 我在 ionic 中使用 lists 来显示商店提供的今天的优惠。

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

最好裁剪图像的正方形部分，以便在页面中以圆形显示。那是因为border-radius:100%; 对方形图像很有魅力。

这是一个Live DEMO！

Answer 2

尝试只使用头像

好像头像css是这样的，

.avatar {
    border-radius: 95px;
}

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

我也猜你需要删除缩略图 你可以在这里编辑

Answer 3

事实： 只有方形对象会被渲染为 CSS 边框半径为 100% 或 50% 的圆形。

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

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

Answer 4

我的建议是设置边界半径的高度和宽度。

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

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