html - 使所有图像大小相同

Question

正在实现my idea ，我试图将很多(玩具示例:4)图像放入 Bootstrap 轮播的一张幻灯片中。然而，我在调整它们的大小以使所有图像在尺寸上具有相同的特征(无论其原始图像如何)方面花费了大量时间。

这是jsFiddle我在幻灯片 1 中显示了该问题，这只是我所做的众多尝试之一:

img.resize{
    width:256px;
    height: 256px;
}

你看，出于可视化的目的，我希望所有图像都具有相同的尺寸。如何做到这一点？

换句话说，我想要的是每个图像都具有相同的宽度x高度尺寸。就像我们将它们传递给一个神经层，该神经层会修剪尺寸以使它们同质，就像它们都被放置在同一个盒子上一样!理想的情况是得到类似 t he search engines give you 的东西。 (其中高度相同，宽度可能略有不同，但对于可视化不会造成任何损害)。

现在，黑色比黄色短。

Answer 1

使用max-width并设置.item类的高度...和overflow:hidden:

<强> Fiddle

一张幻灯片中包含 4 个图像:Fiddle 。请注意，仅使用直接图像，您将无法使它们具有相同的尺寸。好吧，除非你想让它们被压扁、挤压得看起来很可怕。

如果您希望所有 4 个图像看起来具有相同的大小，则需要额外的标记，例如包裹图像标签的 div。这就是像 Google 图片这样的东西的做法......它们将图像标签包装在 div 中，然后隐藏该 div 的任何溢出。

您无法将当前标记中的 4 个图像的大小调整为与其中一张幻灯片中的大小完全相同。图像本身无法被裁剪或隐藏部分。 周围的元素导致图像看起来通过隐藏任何溢出而被裁剪。