使用css进行图像裁剪以保持适当的缩放效果

Question

我有不同的图像，我想让它们保持相同的高度和宽度。

我的代码结构是：

<figure>
    <img src="..img/image.png" />
</figure>

我有大约四个元素。

我的css是：

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure img {
  max-height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

这有助于我保持相同的高度和宽度。

但问题是：

如果我放置一个像素比例较大的图像，它看起来很大。例如，如果我与高分辨率的人使用pic，它只显示眼睛和鼻子。

我现在能做什么？

Answer 1

我认为这可能对你有用。

根据您的喜好给出最大高度：200px。假设您的普通图像尺寸为400X400（以像素为单位），您可以将图像裁剪为200px，但您说这很好。您的问题始于分辨率较高的图像。在这种情况下，您将图形的最大宽度设置为200px，并降低图像的高度和宽度，而不是原始尺寸。假设您的图像尺寸为800X800（以像素为单位），减小图像的宽度和高度，比如说（宽度：400像素;高度：400像素;），那么您可能会看到至少只有鼻子或眼睛的脸部。如果你想看到更多的图像部分，你应该将图像的尺寸减小得更低。

但我建议你压缩图像，如果你有高分辨率的图像。 （http://www.resize-photos.com/）

我认为它应该有效。 如果这不起作用，请发布结果

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure img {
  max-height: 200px;
  width: (lower than original width);
  height: (lower than original height);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

Answer 2

这可能是您的问题的解决方案，如果您指定img的最大宽度，它将限制非常大的图像变得可用

figure{
 overflow: hidden;
 max-height: 200px;
}

.thumbnail figure {
  max-height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
 }

 img {
   max-height: 500px;
 }

https://jsfiddle.net/jwyjwrej/