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

使用“超大”jQuery插件按比例调整全屏图像的大小(Proportionally resizing a full-screen image using “supersized” jQuery plugin)

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

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

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

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

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

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

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

I'm using a jQuery plugin called Supersized to display images in full screen.

You can see a sample here (on homepage): http://mysampleconcept.com/situs4/

If you try to shrink the screen, you will notice that the image will resize too, however it may shrink too much that the image will look bad.

The same plugin is used here as well: http://mysampleconcept.com/situs3/; however, the resizing is done differently so the image doesn't go out of proportions.

I have tried to compare the plugins settings on both sites and they both seem to be similar.

I have tried setting the image width and height to 100% !important in my css and it didn't help.

Any suggestion on how to achieve the same behavior?

最满意答案

问题来自普通的css，你的图像都基于“max-width：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

The issue is from the common css that does your image all base on "max-width:100%".

Check your css reset if there is something like

img { max-width: 100%; }

The supersized official has a solution for the file "supersized.3.2.7.js": https://github.com/buildinternet/supersized/issues/103

If you can not solve it by following the official solution, try only add this in your supersized css:

#supersized img { max-width: none; }

this tricky is by http://blog.valderama.net/node/30