使所有图像大小相同

Question

在实现我的想法的过程中，我试图在 Bootstrap 轮播的一张幻灯片中放置很多（玩具示例：4）图像。但是，我在调整它们的大小方面失败了很多，以便所有图像在尺寸上都具有相同的特征，而不管它们的原始图像如何。

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

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

您看，出于可视化目的，我希望所有图像都具有相同的尺寸。怎么做？

换句话说，我想要的是每个图像都具有相同的width x height尺寸。就像我们将它们传递给一个神经层，该层会修剪尺寸以使它们同质化，就像它们都放在同一个盒子上一样！理想的情况是获得搜索引擎为您提供的内容（高度相同，宽度可能略有不同，但可视化不会造成任何伤害）。

现在，黑色比黄色短。

Answer 1

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

1 张幻灯片中的 4 张图片：Fiddle。请注意，仅使用直的图像将无法使它们具有相同的尺寸。好吧，除非你想让它们被压扁和挤压看起来很可怕。

如果您希望所有 4 个图像显示为相同大小，则需要额外的标记，例如包装图像标签的 div。这就是像谷歌图像这样的事情......他们将图像标签包装在一个 div 中，然后隐藏该 div 的任何溢出。

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