如何使用css制作圆形img答案

【问题标题】：How to make a round img using css如何使用css制作圆形img
【发布时间】：2020-01-15 17:38:57
【问题描述】：

我正在尝试在一个简单的 div 内制作一个 50% 的圆角 img。我已经尝试了两种方法来做到这一点，但显然都没有为我工作。如果它使某些事情变得清晰，那么我得到的图像是方形的

/*HTML*/

<div class="img-container"></div>

/*CSS*/
.img-container {
    background: url("../../../../../assets/img/user-photo.svg") no-repeat center top / cover;
    height: 125px;
    width: 125px;
    border-radius: 50%;
  }


/*HTML*/

<div class="img-container">
    <img src="path_to_img" alt="User photo">
</div>

/*CSS*/

.img-container {
     width: 125px;
     height: 125px;

     img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
     }
}

我把它的底部剪得很短。在上面的 2 个示例中是否还有其他解决方案或我做错了什么？任何帮助表示赞赏。

【问题讨论】：

第二个不是有效的CSS。
什么不起作用？假设第二个是 sass，似乎对我有用
哦，我应该说的简单一点，我其实是在用scss
这能回答你的问题吗？ Rounded corners on rectangular image using CSS only
您的图像看起来是原因，而不是 css。给图片加个边框，看看能不能绕过去。

标签： html css

【解决方案1】：

这是一些简单的标记，一个 div 容器和图像就足够了。

如果图像可能有不同的大小或形状，您可以使用object-fit 属性来确保它无论如何都能正确显示。只需确保定义了图像所需的显式大小（高度和宽度），然后您可以在 img 本身上使用 object-fit: cover，以便它保持其纵横比并使用所有可用空间，例如。

.img-container {
  background-color: purple;
  padding: 10px 0;
  width: 200px;
}

img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

img.rect-img {
  object-fit: cover;
}

<div class="img-container">
  <img src="https://via.placeholder.com/100" alt="User photo">
</div>

<div class="img-container">
  <img class="rect-img" src="https://via.placeholder.com/100x50" alt="User photo">
</div>

【讨论】：

这个答案对我的对象拟合属性有帮助:)

【解决方案2】：

它没有任何问题。我认为您的图像有一些透明部分。

img {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);
}

img.a {
  width: 64px;
  border-radius: 100%;
}

img.b {
  width: 64px;
  border-radius: 100%;
  object-fit: cover;
  width: 64px;
  height: 64px;
}

<h1>Non-square image:</h1>
<img class="a" src="https://images.unsplash.com/photo-1579075475207-e59cd9d39be8">

<hr>

<h1>Converted to square using CSS:
  <h1/>
  <img class="b" src="https://images.unsplash.com/photo-1579075475207-e59cd9d39be8">

【讨论】：