正在实现my idea ,我试图将很多(玩具示例:4)图像放入 Bootstrap 轮播的一张幻灯片中。然而,我在调整它们的大小以使所有图像在尺寸上具有相同的特征(无论其原始图像如何)方面花费了大量时间。
这是jsFiddle我在幻灯片 1 中显示了该问题,这只是我所做的众多尝试之一:
img.resize{
width:256px;
height: 256px;
}
你看,出于可视化的目的,我希望所有图像都具有相同的尺寸。如何做到这一点?
换句话说,我想要的是每个图像都具有相同的宽度x高度
尺寸。就像我们将它们传递给一个神经层,该神经层会修剪尺寸以使它们同质,就像它们都被放置在同一个盒子上一样!理想的情况是得到类似 t he search engines give you 的东西。 (其中高度相同,宽度可能略有不同,但对于可视化不会造成任何损害)。
现在,黑色比黄色短。
最佳答案
使用max-width
并设置.item
类的高度...和overflow:hidden
:
<强> Fiddle
一张幻灯片中包含 4 个图像:Fiddle 。请注意,仅使用直接图像,您将无法使它们具有相同的尺寸。好吧,除非你想让它们被压扁、挤压得看起来很可怕。
如果您希望所有 4 个图像看起来具有相同的大小,则需要额外的标记,例如包裹图像标签的 div。这就是像 Google 图片这样的东西的做法......它们将图像标签包装在 div 中,然后隐藏该 div 的任何溢出。
您无法将当前标记中的 4 个图像的大小调整为与其中一张幻灯片中的大小完全相同。图像本身无法被裁剪或隐藏部分。 周围的元素导致图像看起来通过隐藏任何溢出而被裁剪。
关于html - 使所有图像大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39260318/