html - CSS调整图像大小并保持原始比例

Question

我在这里要做的是裁剪图像以替换我的 div 的空白区域:

<div id="profilepicture" style='background:url()'>
    <img src="utilisateurs/pp/<?php echo $userinfo['photoP']; ?>">
</div>

这里是与此相关的样式表:

#profilepicture{
    height: 200px;
    width: 200px;
    box-shadow: 1px 1px 2px;
    display: flex;
}
#profilepicture img{
    width: 100%;
    height: auto;
    margin: auto;
}

这是它给我的:

我只想裁剪照片的左右两侧并在中心放大以不再有空白!

编辑:

如果我这样做

    width: auto;
    height: 100%;

它给了我这个:

现在我只想让它居中!

有什么想法吗？

Answer 1

使用剪辑

使用 clip 属性。

img {
  position: absolute;
  clip: rect(0, 100px, 100px, 0);
}

有一点需要注意。 clip 仅适用于 position: absolute 或 position: fixed。我不知道为什么。这限制了它的用途，但可以轻松处理。

第二个要注意的是rect()。它的语法(与 CSS 中的许多其他语法一样)是 rect(top, right, bottom, left);。现在注意这里，因为它可能很棘手。 top 和 bottom 值定义了距top border 的偏移量，left 和 right 值定义了距left border 的偏移量。

所以 clip: rect(40px, 260px, 150px, 80px); 执行以下操作。

---

使用背景图片

可能是组装方面最简单的选择。

<div id="profilepicture" style='background-image:url('utilisateurs/pp/<?php echo $userinfo['photoP']; ?>')'>
</div>

div {
  background-position: center;
}

这或多或少地完成了您想要的，尽管它确实有使用内联样式的副作用。