Выравнивание одного изображения сверху по левому краю с помощью 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

Возможно, вы должны заменить ("#nick") на (id = "nick") в компоненте img.

Answer 2

Сначала я бы предложил вам просто обрезать изображение до квадрата 228 на 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%, который соответствующим образом изменил размер фона, чтобы соответствовать лицу в круге.