使所有图像的大小相同

Question

在实施my idea的过程中，我试图在Bootstrap旋转木马的一张幻灯片中放入很多（玩具示例：4）图像。但是，我在调整它们的时间上没那么大，所以所有的图像在尺寸上都有相同的特征，无论它们是原始的。

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

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

你知道，为了实现可视化，我希望这些图像具有相同的尺寸。怎么做？

换句话说，我想要的是每张图片都具有相同的width x height尺寸。就像我们通过一个神经层传递它们一样，它会修剪尺寸以使它们变得同质，就像所有这些都放在同一个盒子上一样！理想的事情是获得类似t he search engines give you的东西（其中所有人的身高都相同，宽度可能有所不同，但是可视化并不会造成任何伤害）。< / p>

现在，黑色比黄色短。

Answer 1

使用max-width并设置.item班级的身高......和overflow: hidden：

<强> Fiddle

1张幻灯片中的4张图片：Fiddle。请注意，只有直接的图像，您才能够使它们具有相同的尺寸。好吧，除非你想要他们压扁和挤压看起来很可怕。

如果您希望出现的所有4个图像大小相同，则需要额外的标记，例如包装图像标记的div。这就是Google图像之类的功能....它将图像标记包装在div中，然后隐藏该div的任何溢出。

您无法在当前标记中调整4张图片的大小，使其在这些幻灯片中只有一张相同。图像本身无法裁剪或隐藏部分。它的周围元素通过隐藏任何溢出来导致图像出现裁剪。