如何在html / css中的圆圈图标中放置图像？

编程问答 2022-08-15

问题描述

我想将图像放置在圆圈图标width:64px;height:64px中 但是我无法做到这一点。

  1. “我的图像”显示为完整且在一个框架中（width:64px;height:64px
  2. 图像没有缩小
  3. 但不在圈子中显示

我正在尝试的是这里：

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>

bootstrap-4htmlhtml5-canvasjquery