Html ionic 3 - 显示圆形图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44613748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic 3 - show rounded image
提问by Usr
I'm trying to set a round image at the top of a page (like a profile page). The image is rectangular and about 300x200. I've tried these ways:
我正在尝试在页面顶部设置圆形图像（如个人资料页面）。图像是矩形的，大约 300x200。我试过这些方法：
1) Using the Ion-Avatar Tag
1) 使用 Ion-Avatar 标签
2) Using Ion-Image tag, setting the border radius in the scss
2）使用Ion-Image标签，在scss中设置边框半径
None of these methods worked. The image just kept showing squared (and eventually shrinked) inside a grey circle:
这些方法都没有奏效。图像在灰色圆圈内一直显示为平方（并最终缩小）：
Any suggestions?
有什么建议？
回答by Udhay Titus
you can try with css
你可以试试 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" />
回答by Patrick Odum
In ionic 3, you can do this...
在离子 3 中，你可以这样做......
<ion-avatar>
<img src="">
</ion-avatar>
That simple
就那么简单
In some cases, you may need to set the img height and width to the same value manually. But this is the standard ionic 3 method.
在某些情况下，您可能需要手动将 img 的高度和宽度设置为相同的值。但这是标准的离子 3 方法。
