如何解决如何在html / css中的圆圈图标中放置图像?
我想将图像放置在圆圈图标width:64px;height:64px
中
但是我无法做到这一点。
- “我的图像”显示为完整且在一个框架中(
width:64px;height:64px
- 图像没有缩小
- 但不在圈子中显示
我正在尝试的是这里:
https://jsfiddle.net/soniya_jain/esu413wv/5/
我也在这里发布代码:
<html>
<img src="https://www.iphonehacks.com/wp-content/uploads/2019/06/Apple-ios-13-home-screen-iphone-xs-06032019.jpg" class="rounded imgProfile" height="55px" width="55px" alt="avatar">
</html>
<style>
.imgProfile {
display: block;
object-fit: contain;
}
</style>
任何想法或建议都会受到欢迎。
解决方法
您必须将其包装到容器中。
.image-container {
border-radius: 50%;
overflow: hidden;
height: 64px;
width: 64px;
}
.image-container img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
<html>
<div class="image-container">
<img src="https://www.iphonehacks.com/wp-content/uploads/2019/06/Apple-ios-13-home-screen-iphone-xs-06032019.jpg" alt="avatar">
</div>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。