卡片中的圆形图像，添加了类但没有变化答案

【问题标题】：Circular Images in cards, class added but no change卡片中的圆形图像，添加了类但没有变化
【发布时间】：2019-01-02 16:31:52
【问题描述】：

我正在尝试制作一个显示团队的网站，每个成员都在一张卡片中，但是该项目需要个人资料照片是一个圆圈，我尝试将“圆圈”类添加到图像中，但它确实有效...

我尝试过的清单： - 向 img 添加 circle 类 - 没有成功
- 添加边框半径为 50% 的自定义样式； - 没有成功
- 将圆形类添加到卡片图像 div - 没有成功

我的代码：

<div class="row">
        <div class="col s12 l4">
            <div class="card">
                <div class="card-image">
                    <img src="images/marcelo.jpg" alt="Foto do Fundador da Empresa,Marcelo Borges Fagundes" >
                </div>
                <div class="card-content">
                    <span class="card-title">Marcelo Borges Fagundes</span>
                    <p>Fundador da Empresa</p>
                </div>
            </div>
        </div>

        <div class="col s12 l4">
                <div class="card">
                    <div class="card-image">
                        <img src="images/thiago.jpg" alt="Foto do Funcionario da empresa,Thiago Zaleski Leon"  class="circle">
                    </div>
                    <div class="card-content">
                        <span class="card-title">Thiago Zaleski</span>
                        <p>Auxiliar de Informática</p>
                    </div>
                </div>
            </div>

    </div>

卡片仍然显示为矩形图像:( 任何想法如何解决这个问题？

【问题讨论】：

能否请您附上 CSS？

标签： css materialize

【解决方案1】：

.card-image {
  border-radius: 50%;
  overflow: hidden;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="row">
        <div class="col s12 l4">
            <div class="card">
                <div class="card-image">
                    <img src="https://via.placeholder.com/50x50" alt="Foto do Fundador da Empresa,Marcelo Borges Fagundes" >
                </div>
                <div class="card-content">
                    <span class="card-title">Marcelo Borges Fagundes</span>
                    <p>Fundador da Empresa</p>
                </div>
            </div>
        </div>

        <div class="col s12 l4">
                <div class="card">
                    <div class="card-image">
                        <img src="https://via.placeholder.com/50x50" alt="Foto do Funcionario da empresa,Thiago Zaleski Leon"  class="circle">
                    </div>
                    <div class="card-content">
                        <span class="card-title">Thiago Zaleski</span>
                        <p>Auxiliar de Informática</p>
                    </div>
                </div>
            </div>

    </div>

【讨论】：

【解决方案2】：

您可以使用overflow: hidden 制作一个“裁剪” div，使图像呈圆形，而不会破坏分辨率。

.crop {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

<div class="crop">
  <img src="https://i.pinimg.com/236x/fb/8a/8d/fb8a8defbf55501ce344e161f8c44fed--google-images-gift-ideas.jpg" alt="">
</div>

Working Fiddle

【讨论】：

【解决方案3】：

要创建圈子，您可以申请border-radius: 100%;

img {
  min-width: 100px;
  max-height: 100px;
  background-color: green;
}

.circle {
  border-radius: 100%;
}

<div class="row">
  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://dhirajkumarsingh.files.wordpress.com/2012/05/css3-html5-logo.png" alt="Foto do Fundador da Empresa,Marcelo Borges Fagundes" class="circle">
      </div>
      <div class="card-content">
        <span class="card-title">Marcelo Borges Fagundes</span>
        <p>Fundador da Empresa</p>
      </div>
    </div>
  </div>

  <div class="col s12 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/CSS.3.svg/730px-CSS.3.svg.png" alt="Foto do Funcionario da empresa,Thiago Zaleski Leon" class="circle">
      </div>
      <div class="card-content">
        <span class="card-title">Thiago Zaleski</span>
        <p>Auxiliar de Informática</p>
      </div>
    </div>
  </div>

</div>

【讨论】：

【解决方案4】：

将此添加到您的卡片图像类：

.card-image{
  clip-path: circle(100px at center);
}

会发生什么，它会通过制作一个半径为 100px 的圆圈从中心剪辑图像，您可以更改像素以适合您的图像大小

【讨论】：