Vegas.jsのレスポンシブ化を試みた所、デフォルトのcssにmin-width:100%と書いてあったので、
width:960px,height:540pxの画像を拡大するとうまく処理されますが、
どうしても、縮小して、max-width:100%をいれても画面が縮小しません。
js内にbackground-size指定はありません。(指定があれば、containまたはcoverでうまく
処理できますが)
これは丸投げではありません。散々カスタマイズしました。
よろしければご教授願います。
追記。css3には
@media only screen and (max-width:960px){
.vegas-wrapper{width:100%;margin:0;padding:0;}
.vegas-video {width:100%;margin:0;padding:0;}
.vegas-video img{max-width:100%;display:inline-block;}
.vegas-wrapper img{max-width:100%;display:inline-block;}
body > .vegas-wrapper {height:100%;}
}
追加。jsは全部のせることは丸投げなので、
htmlをのせます。
<header style="opacity:0.9;"><section><div id="logo"><i class="icon-media_wc"></i></div></section></header>
<script src="js/jquery.js"></script>
<script src="js/vegas.js"></script>
<script>
$('body').vegas({
overlay: true,
transition: 'flash',
transitionDuration: 2000,
delay: 10000,
animation: 'random',
animationDuration: 20000,
slides: [
{ src: './img/paper01.jpg' },
{ src: './img/paper02.jpg' },
{ src: './img/paper03.jpg' },
{ src: './img/paper04.jpg' },
{ src: './img/paper05.jpg' },
{ src: './img/paper06.jpg' },
{ src: './img/paper07.jpg' },
{ src: './img/paper08.jpg' },
{ src: './img/paper09.jpg' },
{ src: './img/paper10.jpg' }
]
});
</script>
お願い致します。