圖像邊界半徑

我創建Android應用程序的幫助下離子famework。我的UI有這個問題。 Im使用lists在離子顯示今天的商店給出的交易。圖像邊界半徑

即時通過屬性border-radius:100%製作縮略圖，但是當放置一個矩形圖像時，我的縮略圖被搞砸了。它很好，當我使用sqare圖像。但即時通訊創建這個應用程序必須支持所有形狀的圖像。 查找下面的截圖就知道如何像長方形border-radius:100%

enter image description here

我想我的縮略圖圓形而不被拉伸的響應。預期列表的圖像在下面給出 enter image description here

有沒有什麼辦法讓離子框架中的縮略圖變成圓形？

<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。我不知道該怎麼辦。

來源

2014-09-28 Dino

你嘗試項目具象 – sakir 2014-09-28 12:26:37

請檢查這一點，如果它可以幫助你 - http://stackoverflow.com/questions/22577371/how-to-make-rectangular-image-appear-circular-with-css – Ashish 2014-09-28 12:55:34

@sakir是的，我試過了，問題是一樣的。不能使用矩形圖像 – Dino 2014-09-28 13:02:39

這是更好地作物你的形象，你想在一個圓形的形狀在頁面中顯示的廣場一部分。這是因爲border-radius:100%;就像一個正方形圖像的魅力。

這是Live DEMO！

來源

2014-09-28 13:17:54

我沒有選項來裁剪圖像。因爲這些圖像是由用戶上傳的。 http://stackoverflow.com/questions/22577371/how-to-make-rectangular-image-appear-circular-with-css 此鏈接幫助了我。現在我能夠顯示圓形圖像。 – Dino 2014-09-28 13:22:56

嘗試使用僅化身

似乎化身CSS這樣的事情，

.avatar { 
    border-radius: 95px; 
} 

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

也是我猜u需要刪除略圖clases ü可以在這裏編輯

來源

2014-09-28 13:24:48 sakir

事實：只有方形物體將以CSS邊框半徑的圓形呈現：100％或50％。

所以你必須給圖像本身以相同的寬度和高度。

...或者我只是不明白你的問題^^

來源

2014-09-28 14:56:07

我知道。但我也必須渲染rectangluar對象。我從http://stackoverflow.com/questions/22577371/how-to-make-rectangular-image-appear-circular-with-css得到答案 – Dino 2014-09-28 15:16:16

我的建議是設置邊界半徑與高度和寬度。

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

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

來源

2016-09-19 07:35:12 luv4code

圖像邊界半徑

回答

相關問題