无法为个人资料图片裁剪图像的特定部分答案

【问题标题】：Can't crop specific part of image for profile picture无法为个人资料图片裁剪图像的特定部分
【发布时间】：2018-09-10 17:43:58
【问题描述】：

我想从本质上拍摄一张图片并使用 CSS 裁剪其中的一部分。

这是我想要使用的图片。

这就是我想要的裁剪方式

所以，这是我现在正在使用的代码。

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>

这就是结果

如果你能帮助我，我将不胜感激！

【问题讨论】：

标签： html css image size crop

【解决方案1】：

您只需将图像设置为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>

【讨论】：

你太棒了！
我不会，它只会让我再等 30 秒，哈哈！