gpt4 book ai didi

html - Bootstrap 3 : images of same height displaying at different heights

转载 作者:行者123 更新时间:2023-11-28 03:54:32 26 4
gpt4 key购买 nike

我使用 360 像素正方形或 360 像素高 x 720 像素宽的图像使用 bootstrap 设计了一个图像网格。出于某种原因,宽图像在行中显示得更高。知道为什么会发生这种情况以及如何解决它吗?

这里是 the code in bootply

谢谢!

最佳答案

图像不会仅仅因为它们具有相同的物理高度而以相同的高度显示,因为它们会随着您的布局缩放。每列中的填充和列中的元素减少了图像可用的水平空间,当水平尺寸改变时,垂直尺寸也会改变(以适当缩放图像)。

看看左/宽图像如何只在一个列中,但右侧的 2 个图像在 2 列中。右侧的 2 个图像中的填充比左侧多(填充量是左侧的两倍,因为图像的数量是其两倍)。这是将每个图像的高度缩放为比左侧图像短。

我从 .col-* 类和 .thumbnail 中删除了填充,以表明如果删除它们,图像会对齐。

http://www.bootply.com/KacXrRCbYH

您可以通过多种方式解决此问题,但我认为这需要由您来决定什么最适合您的布局。最简单的方法可能只是更改左侧图像的高度以解决该填充问题。 720x341 似乎是在那里工作的分辨率。

http://www.bootply.com/T4F3fdgNyf

关于html - Bootstrap 3 : images of same height displaying at different heights,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43546901/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com