如何设置圆形图像？答案

【问题标题】：How to set Circle image?如何设置圆形图像？
【发布时间】：2019-01-03 01:43:14
【问题描述】：

如何使用 bootstrap 从矩形图像中显示圆形图像？

这里是圆的可能代码；

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" >

但它仅适用于方形图像，对于矩形图像它将变成日食。我们如何在不固定高度或宽度的情况下解决它？

【问题讨论】：

jsfiddle.net/v5e5X
也许这篇关于遮罩/剪辑的文章为您指明了一个好的方向？ -> css-tricks.com/clipping-masking-css
使用border-radius。
Bootstrap 3: Using img-circle, how to get circle from non-square image?的可能重复
使用css属性border-radius:50px;

标签： html css asp.net

【解决方案1】：

您可以通过将图像作为此答案的背景来实现这一点 - Bootstrap 3: Using img-circle, how to get circle from non-square image?

好吧，如果你还想使用Img标签来显示图片那么，我以一种奇怪的方式找到了解决方案。

JSFiddle

div.wrapper {
  text-align: center;
  width: 300px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.clipped-image img {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  right: 0;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

.clipped-image {
  display: block;
  position: relative;
  margin: 0 auto;
  /* desired width */
}

.clipped-image:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}

.clipped-image .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <h4>Original image</h4>
  <div class="real-image">
    <img src="http://loremflickr.com/320/240">
  </div>

  <br>
  <br>
  <br>

  <h4>Image after clipping</h4>
  <div class="clipped-image">
    <div class="mask">
      <img src="http://loremflickr.com/320/240" class="img-circle" alt="Cinque Terre">
    </div>

  </div>
</div>

【讨论】：

@KinjalGohil 虽然它是 hack，但我强烈建议您将图像设置为背景，正如我在第一句话中提到的那样。如果您的问题得到解决，请将此答案标记为已接受。谢谢:)

【解决方案2】：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body class="w3-container">

<h2>Image in a Circle</h2>
<p>You do not need boostrap, you can use w3-schools libraries instead</p>

<img src="http://i.imgur.com/lGq1IXo.png" class="w3-circle" alt="" style="width:50%">

</body>
</html>

【讨论】：

【解决方案3】：

这可以通过以下方式简单地实现：
像这样向你的图像添加一个类：

.rounded {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

&lt;img class="rounded" src="https://images.vexels.com/media/users/3/145922/preview2/eb6591b54b2b6462b4c22ec1fc4c36ea-female-avatar-maker.jpg"/&gt;

【讨论】：

不回答问题。这个 CSS 为矩形图像渲染一个椭圆，这正是 OP 试图规避的问题