代码之家 › 专栏 › 技术社区 › TJ1

在CSS中裁剪为圆形的图像下添加标题

caption geometry css html

0

TJ1 · 技术社区 · 7 年前

.centered-and-cropped {
  object-fit: cover;
  border-radius:50%;
  width: 100px;
  height: 100px; 
}

我有这个html代码:

<center>
<img class="centered-and-cropped"  src="image.jpg" alt="Bear1">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear2">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear3">
</center>

<center>
<img class="centered-and-cropped"  src="image.jpg" alt="Bear4">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear5">
<img class="centered-and-cropped"  src="image.jpg" alt="Bear6">
</center>

下面是一张图片,展示了它的外观:

我如何才能做到这一点,使每个图像都有一个标题下的权利?

1 回复 | 直到 7 年前

1

derrysan7 7 年前

你可以使用figcaption标签

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figcaption

<center>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear1">
  <figcaption>Bear1.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear2">
  <figcaption>Bear2.</figcaption>
 </figure>
 <figure>
  <img class="centered-and-cropped"  src="image.jpg" alt="Bear3">
  <figcaption>Bear3.</figcaption>
 </figure>
</center>