使所有图像大小相同
Make all images to be of the same size
在实现 的过程中，我试图在 Bootstrap 的旋转木马的一张幻灯片中放置很多（玩具示例：4）图像。然而，我在调整它们的大小上失败了很多，所以所有的图像在尺寸上都具有相同的特征，不管它们的原始图像是什么。
这是我在幻灯片 1 中显示问题的 jsFiddle，这只是我所做的众多尝试之一：
img.resize{
width:256px;
height: 256px;
}
你看，为了可视化目的，我希望所有图像都具有相同的尺寸。怎么做？
换句话说，我想要的是每个图像都具有相同的 width x height 尺寸。就像我们让它们通过一个神经层，该神经层 trim 维度使它们同质，就像它们都放在同一个盒子上一样！理想的事情是得到类似 the search engines give you 的东西（其中所有人的高度都相同，宽度可能略有不同，但 w.r.t。对不会造成任何伤害的可视化).
现在，黑色比黄色短。
使用 max-width 并设置 .item class 的高度...和 overflow: hidden:
一张幻灯片中有 4 张图片：Fiddle。请注意，仅使用直图像，您将无法使它们大小相同。好吧，除非你想让它们被压扁，看起来很可怕。
如果您希望所有 4 张图片 显示 大小相同，您需要额外的标记，例如 div 包裹图片标签。 Google images 就是这样做的....他们将图像标签包装在 div 中，然后隐藏 div.
的任何溢出
您无法将当前标记中的 4 张图片调整为与其中一张幻灯片中的图片大小完全相同。图像本身不能被裁剪或隐藏部分。 周围的元素 导致图像出现 通过隐藏任何溢出进行裁剪。
在实现
这是我在幻灯片 1 中显示问题的 jsFiddle，这只是我所做的众多尝试之一：
img.resize{
width:256px;
height: 256px;
}
你看，为了可视化目的，我希望所有图像都具有相同的尺寸。怎么做？
换句话说，我想要的是每个图像都具有相同的 width x height 尺寸。就像我们让它们通过一个神经层，该神经层 trim 维度使它们同质，就像它们都放在同一个盒子上一样！理想的事情是得到类似 the search engines give you 的东西（其中所有人的高度都相同，宽度可能略有不同，但 w.r.t。对不会造成任何伤害的可视化).
现在，黑色比黄色短。
使用 max-width 并设置 .item class 的高度...和 overflow: hidden:
一张幻灯片中有 4 张图片：Fiddle。请注意，仅使用直图像，您将无法使它们大小相同。好吧，除非你想让它们被压扁，看起来很可怕。
如果您希望所有 4 张图片 显示 大小相同，您需要额外的标记，例如 div 包裹图片标签。 Google images 就是这样做的....他们将图像标签包装在 div 中，然后隐藏 div.
的任何溢出您无法将当前标记中的 4 张图片调整为与其中一张幻灯片中的图片大小完全相同。图像本身不能被裁剪或隐藏部分。 周围的元素 导致图像出现 通过隐藏任何溢出进行裁剪。