gpt4 book ai didi

html - 无法裁剪个人资料图片的特定部分

转载 作者:太空宇宙 更新时间:2023-11-04 01:05:49 24 4
gpt4 key购买 nike

我实际上是想拍摄一张图片并使用 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="/image/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>

</body>

</html>

结果出来了

enter image description here

如果你能帮助我,我将不胜感激!

最佳答案

您所要做的就是将图像设置为 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="/image/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>

</body>

</html>

关于html - 无法裁剪个人资料图片的特定部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52262940/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com