html - 使用 CSS 左上对齐单个图像

Question

我正在尝试在我们的网页 ( https://www.palousebicycle.org/team.html ) 上上传一张图片，这样人的脸就不会被剪掉，同时保持其他人的脸不变(这是最后一张图片)。

我试过内联 html:

#staff2 {
  border: 10px solid white;
  width: 45%;
  min-width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff img {
  border-radius: 50%;
  width: 228px;
  height: 228px;
  object-fit: cover;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.staff figure {
  display: inline-block;
  padding: 30px 40px;
  text-align: center;
}
#nick {
  position: absolute;
  top: -30px;
  left: -30px;
  align: top, left;
}

<img "#nick" src="pictures/nick.jpg" alt="Nick" align="left,top">

以及分配图像#id (#nick) 并使用 CSS 属性“align”、“left”和“top”。

我也尝试在图片上使用框架将其移动到左上角，但我无法将图像放在正确的位置以不显示框架。

我们是一家小型非营利组织，我已经有一段时间没有写网页了，所以请原谅我有点生疏，而且可能没有正确提出问题。请让我知道我可以发布的任何其他信息或文件，非常感谢您的帮助!非常感谢您的宝贵时间和协助!

Answer 1

我首先建议您将图片裁剪为 228 像素 x 228 像素的正方形，并将人物适本地居中。这将使您能够最大程度地控制图像的裁剪方式。

如果你想用css来做，你可以这样做:

#nick {
  background-image: url(https://www.palousebicycle.org/pictures/nick.jpg);
  background-size: 300%;
  border-radius: 50%;
  width: 228px;
  height: 228px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div id="nick"></div>

用 background-image 显示图像css 属性而不是 html <img>标签允许您更好地控制它的裁剪方式。在这种情况下，我只是添加了一个 background-size: 300%适当调整背景大小以适合圆圈中的脸部。