圖像邊界半徑

Question

我在離子框架的幫助下創建了android應用程序。 我在UI中遇到這個問題。 我使用ionic中的列表來顯示商店今天給出的交易。

我通過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%; 就像方形圖片的魅力一樣。

這是現場演示 ！

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; 
    }