Twitter bootstrap 使用Twitter Bootstrap 2.0和2.1,并使用ISOTO指定图像大小

Twitter bootstrap 使用Twitter Bootstrap 2.0和2.1,并使用ISOTO指定图像大小,twitter-bootstrap,jquery-isotope,twitter-bootstrap-rails,Twitter Bootstrap,Jquery Isotope,Twitter Bootstrap Rails,Twitter引导在2.0和2.1之间发生了一些变化,在使用awesome同位素图像库时排除了图像大小的简单规范,并要求用户使用$(window).load或$container.imagesLoaded的替代技术来正确绘制(http://isotope.metafizzy.co/docs/help.html). 所看到的错误是,指定图像的垂直高度似乎被忽略,并且图像重叠。更改为等待图像加载的替代形式会导致更糟糕的闪烁和绘制问题体验。我最终回到了Bootstrap 2.0 我确认这个问题是在2.

Twitter引导在2.0和2.1之间发生了一些变化,在使用awesome同位素图像库时排除了图像大小的简单规范,并要求用户使用$(window).load或$container.imagesLoaded的替代技术来正确绘制(http://isotope.metafizzy.co/docs/help.html). 所看到的错误是,指定图像的垂直高度似乎被忽略,并且图像重叠。更改为等待图像加载的替代形式会导致更糟糕的闪烁和绘制问题体验。我最终回到了Bootstrap 2.0

我确认这个问题是在2.1版本的引导中引入的。您可以在此处找到引导的更改历史记录:


有人知道2.1中的哪些变化可能导致了这种破坏,以及是否有任何好的解决方法。如上所述,等待图像加载比只输入图像高度和宽度要糟糕得多,因此这并不是真正的解决方法

我把答案贴在这里:

将其内联到CSS中起作用,如下所示: img src=“blah blah”width=398 height=265 style=“width:398px;height:265px”

事实上,我也没有使用宽度和高度属性测试同位素,如下所示: img src=“blah blah”style=“宽度:398px;高度:265px”

而且效果很好!如果只指定CSS更好,有什么建议吗

通过使用以下CSS,我能够非常轻松地在没有引导(或引导2.0)的情况下测试此功能: img{ 宽度:自动; 高度:自动; }

CSS中的宽度和高度似乎确实覆盖了图像属性,在加载图像之前,浏览器不知道要分配多少空间,然后,即使在加载图像之后,间距仍然是错误的,至少在某些情况下是错误的。内联样式可以解决这个问题。我想我试过使用常规样式,但这似乎不起作用,但我可能遇到了CSS优先权问题。不管怎样,由于图像大小是与图像属性一起设置的,所以很自然地加入这一点点内联CSS。我希望我们最终能找到更好的解决方案,因为这肯定会在升级时影响到其他人

或者至少应该记录下,需要对图像的宽度和高度使用内联样式,而不是属性