使用“超大” jQuery插件按比例调整全屏图像的大小

Question

我正在使用一个名为Supersized的jQuery插件以全屏显示图像。

您可以在此处（在主页上）看到一个示例： http : //mysampleconcept.com/situs4/

如果您尝试缩小屏幕，则会注意到图像也会调整大小，但是可能会缩小太多，以致图像看起来不佳。

这里也使用了相同的插件： http : //mysampleconcept.com/situs3/ ; 但是，调整大小的方式有所不同，因此图像不会超出比例。

我试图比较两个站点上的插件设置，它们似乎很相似。

我试图在CSS中将图像的宽度和高度设置为100% !important ，但这没有帮助。

关于如何实现相同行为的任何建议？

Answer 1

当我删除

#supersized img {
 width: 100% !important;
 height: 100% !important;
}

它似乎有效。

Answer 2

尽管不是最佳解决方案，但我能够通过在超大图像中添加min-width和min-height来解决此问题

Answer 3

问题出在常见的CSS中，您的图片全部基于“最大宽度：100％”。

检查您的CSS重置是否存在类似问题

img { max-width: 100%; }

超大官员为文件“ supersized.3.2.7.js”提供了解决方案： https : //github.com/buildinternet/supersized/issues/103

如果您无法按照官方解决方案解决问题，请尝试仅将其添加到超大型CSS中：

#supersized img { max-width: none; }