我有一个图库，图片大小不同。有些是肖像，有些是风景。使用最新版本的JQuery和Supersized，可以：
a）按比例显示我所有的图像，在#supersized ul的100％处，没有我的横向格式图像被剪切掉，所有图像在调整窗口大小时仍按比例调整大小？
b）水平居中这些图像，水平和垂直变小？
或者我们可以使用另一个插件 以下是我使用Wordpress循环调用Supersized：
jQuery(document).ready(function($){
$.supersized({
// Functionality
slideshow : 1,
start_slide : 1, // Start slide (0 is random)
new_window : 1, // Image links open in new window/tab
image_protect : 1, // Disables image dragging and right click with Javascript
transition : 6,
autoplay : 1,
slide_interval : 7000,
transition_speed : 1000,
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 0, // Vertically center background
horizontal_center : 0, // Horizontally center background
fit_always : 1, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 1, // Landscape images will not exceed browser width
// Components
thumb_links : 1,
thumbnail_navigation : 1,
slide_links : 0,
keyboard_nav : 1,
slides : [
<?php
$category = get_queried_object();
$cid = $category->term_id;
$args = array('post_type'=>'photo', 'cat'=>$cid);
$i = 0;
$posts = query_posts( $args );
$count = count($posts) - 1;
$q = new WP_Query( $args );
if ($q->have_posts()) : while ($q->have_posts()) : $q->the_post();
$post_thumbnail_id = get_post_thumbnail_id();
$featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'square' );
if ($i != $count) {
echo "{ image : '". $featured_src[0] ."', title :''},";
} else {
echo "{ image : '". $featured_src[0] ."', title :''}";
}
$i++;
endwhile;
?>
],
progress_bar: 0
});
});
</script>
这是我的CSS（特定于类别图像，因为我在页面的其他地方有一个实际的全屏Supersized）：
body.category #supersized-loader { margin:auto 0; position:fixed; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
body.category #supersized {left:240px;display:block; position:fixed; margin:0 auto; overflow:hidden; z-index:1; height:100%; width:100%; /*max-width:1280px;max-height:720px;*/}
body.category #supersized img {width:auto; height:auto; position:relative; display:none; outline:none; border:none;}
body.category #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
body.category #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/
body.category #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#272727; }
body.category #supersized a { width:100%; height:100%; display:block; }
body.category #supersized li.prevslide { z-index:-20; }
body.category #supersized li.activeslide { z-index:-10; }
body.category #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
body.category #supersized li.image-loading img{ visibility:hidden; }
body.category #supersized li.prevslide img, body.category #supersized li.activeslide img{ display:inline; }