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

通过将图像移动到背景，我建议使用“cover”属性的背景。

HTML：

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

的CSS：

#profilepicture{
    height: 200px;
    width: 200px;
    box-shadow: 1px 1px 2px;
    display: flex;
    background-size:cover;
    background-position:center;
}

Answer 2

这是一种方法。

在包含图像的父容器上设置overflow: hidden。

然后，您可以使用绝对定位将图像的左边缘放置到中心，然后使用translateX将其向左移动50％以使图像居中。

通过在父容器中隐藏/隐藏溢出来隐藏/裁剪图像的左右边缘的净效果。

#profilepicture {
  height: 200px;
  width: 200px;
  box-shadow: 1px 1px 2px;
  overflow: hidden;
  position: relative;
}
#profilepicture img {
  width: auto;
  height: 100%;
  margin: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div id="profilepicture">
  <img src="http://placehold.it/400x300">
</div>

Answer 3

居中，添加负边距并隐藏溢出：

Portuguese - BRAZIL (BR) (pt_BR)

#profilepicture{
    height: 200px;
    width: 200px;
    box-shadow: 1px 1px 2px;
    display: flex;
    text-align:center;
    overflow:hidden;
}
#profilepicture img{
    width: auto;
    height: 100%;
    margin: 0 -50%;
}

Answer 4

使用Clip

使用clip属性。

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

有一点需要注意。剪辑仅适用于position: absolute或position: fixed。我不知道为什么。这限制了它的用处，但可以毫不费力地处理。

要注意的第二件事是关于rect()。它的语法（与CSS中的许多其他语法一样）是rect(top, right, bottom, left);。现在请注意，因为它可能很棘手。顶部和底部值都定义了顶部边框的偏移量，左侧和右侧值定义了左边框的偏移量。

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

使用Background-Image

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

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

div {
  background-position: center;
}

这或多或少会做你想要的，虽然它确实有使用内联样式的副作用。

Answer 5

好的，我听到了你的声音。我有一些与此非常相似的东西。有几种方法可以实现这一目标。

1. 使用object-fit不太受支持的CSS属性 - 它完全符合您的要求，但如果您想支持大多数浏览器，则需要使用poyfill。

2. 将图片包装器div设置为overflow:hidden，如guide中所述。该指南适用于圆形图像，因此只需省略border-radius部分。

如果你想看一个例子我已经为两个选项做了一个。第一个选项是已注释掉的选项，第二个选项是活动选项：http://codepen.io/cactusa/pen/qZrobK

Answer 6

减小容器的高度（#profilepicture），因为你有一个高度和宽度相同的方形容器，但是img是一个矩形，并且没有相同的高度和宽度，将img的高度增加到100％会造成扭曲，看起来很有趣。