为什么我的 img 响应类不能正确缩放？

Question

http://www.blessedbythebestbarbershop.com/photos.html
由于某种原因，右下角的图片不断调整到不同的高度，我不确定为什么。图像大小与其他 5 个相同。有人能说出为什么要这样做吗？

link to source

Answer 1

添加到Syden says

当前第一张图片：720px × 960px（缩放到 350px × 467px）
目前第 6 张图片：528px × 960px（缩放为 350px × 636px）

这第 6 张图片的宽高比与其他图片不同（具有 11 : 20 而不是 15 : 20）。

您的图像被缩放到设置的强制宽度 (350px)，因此图像的高度与 它的缩放宽度成比例。为了解决这个问题，您需要保持图像纵横比完全相同，因此当它们具有相同的宽度时，它们将具有相同的高度。

有多种解决方案，例如强制 CSS 裁剪图像和设置最大高度，但您可能不会想要这些。简单地根据其他图像调整第 6 张图像的大小要容易得多。

Answer 2

因为有些图片是 720 x 960 像素，有些是 528 x 960 像素。

如果可以的话，将它们全部 Photoshop 成静态相同的大小。