web-dev-qa-db-ja.com

ionic 3-丸みのある画像を表示

（プロフィールページのように）ページの上部に円形の画像を設定しようとしています。画像は長方形で、約300x200です。私はこれらの方法を試しました：

1）イオンアバタータグの使用

2）Ion-Imageタグを使用して、scssで境界線の半径を設定する

これらの方法はどれも機能しませんでした。画像は灰色の円の中に四角い（最終的には縮小された）を示し続けています。

enter image description here

助言がありますか？

htmlcssionic3circleimage
5
Usr

あなたはCSSで試すことができます

.image {
     height: 5vw; 
     width: 5vw; 
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px gray;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.circle-pic{
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
<div class="image">
</div>

<p>or if you want only image try this</p>

 <img class="circle-pic" 
 src="http://autokadabra.ru/system/uploads/users/18/18340/small.png?1318432918" />
8
Udhay Titus

ionic 3では、これを行うことができます...

<ion-avatar>
      <img src="">
</ion-avatar>

その単純な

場合によっては、imgの高さと幅を手動で同じ値に設定する必要があります。しかし、これは標準的なionic 3メソッドです。

https://ionicframework.com/docs/components/#avatar-list

3
Patrick Odum