Не удается обрезать определенную часть изображения для изображения профиля - PullRequest
Новая
       25

Не удается обрезать определенную часть изображения для изображения профиля

0 голосов
/ 10 сентября 2018

Я хочу по существу взять изображение и обрезать его фрагмент с помощью CSS.

Вот изображение, которое я хотел бы использовать.

enter image description here

Вот как я хотел бы обрезать его

enter image description here

Итак, вот код, который я сейчас использую. 

body {
  font-family: "Montserrat", sans-serif;
}

.staffboxes {
  background: white;
  width: 15%;
  text-transform: uppercase;
  border: #dedede solid 1px;
}

.staffpfp {
  height: 100px;
  width: 100px;
  overflow: hidden;
  float: left;
}
<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" href="staffdesign.css">
  <meta charset="UTF-8" />
</head>

<body>

  <h3>Staff Page</h3>

  <div class="staffboxes">
    <p>
      <div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
      <h3>Kouhai</h3>
    </p>
  </div>

</body>

</html>

Вот что выходит

enter image description here

Если вы могли бы помочь мне,Буду признателен за это!

1 Ответ

0 голосов
/ 10 сентября 2018

Все, что вам нужно сделать, это установить ваше изображение на width: 100% и высоту на auto, чтобы предотвратить искажения.

Таким образом, если вы в будущем измените общий размер класса .staffpfp,img внутри будет адаптироваться соответственно. 

body {
  font-family: "Montserrat", sans-serif;
}

.staffboxes {
  background: white;
  width: 15%;
  text-transform: uppercase;
  border: #dedede solid 1px;
}

.staffpfp {
  height: 100px;
  width: 100px;
  overflow: hidden;
  float: left;
}

.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>

<head>
  <link rel="stylesheet" href="staffdesign.css">
  <meta charset="UTF-8" />
</head>

<body>

  <h3>Staff Page</h3>

  <div class="staffboxes">
    <p>
      <div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
      <h3>Kouhai</h3>
    </p>
  </div>

</body>

</html>
...