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

Proportionally resizing a full-screen image using "supersized" jQuery plugin

本文关键字：jQuery 插件 缩放 按比例 调整 使用 图像      更新时间：2023-09-26

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

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

如果你试图缩小屏幕，你会注意到图像也会调整大小，但它可能缩小得太多，图像看起来会很糟糕。

这里也使用了相同的插件：http://mysampleconcept.com/situs3/；然而，调整大小的方式有所不同，这样图像就不会超出比例。

我试着比较了两个网站上的插件设置，它们似乎都很相似。

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

关于如何实现同样的行为，有什么建议吗？

问题来自于普通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; }

这很棘手http://blog.valderama.net/node/30

当我删除

时#超大img{宽度：100%！重要的高度：100%！重要的}
这似乎奏效了。

虽然不是最佳解决方案，但我能够通过将min-width和min-height添加到超大图像中来解决这个问题

相关文章：