对于引导选项卡，Retina js将宽度和高度设置为0

Question

我在带有引导选项卡的页面上使用Retina.js（http://retinajs.com/）。当它为第一个选项卡加载正确的图像时，其他选项卡会加载正确的图像（即2x）但高度和宽度设置为0.如何解决此问题？是否可以在标签更改时触发某些内容？

此线程（https://github.com/imulus/retinajs/issues/90）建议将隐藏的标签高度更改为0并将overflow：hidden更改为display：none。不确定如何更改我的引导标签事件来执行此操作 - 任何想法？

Answer 1

我有一个类似的问题，并且能够用这个CSS纠正它：

.tab-content>.tab-pane {
   display: block;
   height: 0px;
   overflow: hidden;
}
.tab-content>.active {
    height: auto;
    overflow: auto;
}

Answer 2

retina.js v1.3.0的问题在于它有点过时，像这样的错误仍然没有得到解决。因此，最好使用更新更好的版本available at imulus。

但是，还有另一种方法可以解决插件本身的问题：

(c.el.setAttribute("width",c.el.offsetWidth), c.el.setAttribute("height",c.el.offsetHeight))

你应该用 naturalWidth 和 naturalHeight 替换 offsetWidth 和 offsetHeight ，这样可以防止图像变宽每次重新显示时高度为0。

我希望这有帮助，我知道答案有点太晚了，但它帮助我解决了这个问题。