时间戳

首页 > 解决方案 > 如何将图像放入 html/css 中的圆形图标中？

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

问题描述

我想将图像放入一个圆形图标中，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>

欢迎任何想法或建议。

标签： htmljquerycssbootstrap-4html5-canvas

解决方案

您必须将其包装到容器中。

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

推荐阅读