如何将图像放入 html/css 中的圆形图标中？答案

【问题标题】：How to fit image in a circle icon in html/css?如何将图像放入 html/css 中的圆形图标中？
【发布时间】：2020-12-10 06:15:02
【问题描述】：

我想把图片放在一个圆圈图标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>

欢迎任何想法或建议。

【问题讨论】：

标签： html jquery css bootstrap-4 html5-canvas

【解决方案1】：

你必须把它包装到一个容器中。

.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>

【讨论】：

请传递此网址图片将被缩小iphonehacks.com/wp-content/uploads/2019/06/…
要么使用对象匹配要么裁剪图像
我正在使用 object-fit:contain;请检查：jsfiddle.net/soniya_jain/esu413wv/5
我添加了对象适合：在我的回答中覆盖