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

Question

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?

Answer 1

When I removed

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

it seems to work.

Answer 2

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

Answer 3

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