Question

我正在尝试创建一个显示团队的网站，每个成员都在卡片中，但是该项目需要将个人资料照片圈起来，我试图在图像上添加“圈子”类，但是它做事...

我尝试过的清单： -向img添加圈子类-没有成功
-添加边框半径为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>

该卡仍显示为矩形图像：( 任何想法如何导致这一结果？

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

Answer 2

您可以使用overflow: hidden制作一个“ crop” 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

Answer 3

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

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

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

Answer 4

要创建圈子，您可以应用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 个答案: