卡片中的圆形图像，class 添加但未更改

Question

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

我尝试过的清单： - 将圆 class 添加到 img - 没有成功
- 添加边框半径为 50% 的自定义样式； - 没有成功
- 将圆 class 添加到卡片图像 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>

卡片仍然显示为矩形图像:( 有什么想法可以解决这个问题吗？

Answer 1

将此添加到您的名片图片中 class:

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

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

Answer 2

要创建圈子，您可以申请 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>

Answer 3

您可以制作 "crop" div，使图像呈圆形，而不会破坏分辨率，overflow: hidden。

.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

Answer 4

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

卡片中的圆形图像，class 添加但未更改

Circular Images in cards, class added but no change

css

materialize