jQuery 画面サイズにスライド画像をフィットさせる方法を教えてください

解決済

質問者：uxk
質問日時：2017/02/17 17:17
回答数：1件

画面サイズにスライド画像をフィットさせる方法がうまく行かず困っております。

どの画面サイズにしてもスライドしている画像は高さも横も（横が長い場合は切れてしまってOK）ぴったりに収めたいです。
例）http://sugimotoknife.com/

ソースを見ても全く分かりません。
どなたかわかる方いらっしゃいますでしょうか。

画像の下には別の要素が並んでいるようにしたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： genki0301ab
回答日時：2017/02/18 13:50

こんにちは、サンプル作ってみました。

参考にしてみてください。

(Chrome、Safari動作確認済み)

*必要な素材、及び階層
index.html
jquery-1.11.3.min.js
images(フォルダ) - slide01.jpg ~ slide05.jpg(計五枚の画像ファイル)

画像のサイズにかんしましては、任意の要素にbackground-image:coverでぴったりフィットしますよ。
ただし、親要素にはwindowの幅を取得してCSSで与えてください。

頑張ってくださいね(^^)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>imageSlide</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="slider-wrapper">
</div>
<script>
var Slider = function(element) {
this.count = 0;
this.speed = 2500;
this.innerDuration = this.speed / 2000 + "s";
this.dataset = ["slide01.jpg" , "slide02.jpg" , "slide03.jpg" , "slide04.jpg" , "slide05.jpg"]; //任意の数と名前の画像ファイルを格納
this.width = $(window).width() + "px"; //windowの幅を取得
this.height = $(window).height() + "px"; //windowの高さを取得
this.wrapper = $("." + element);
this.wrapper.append("<div class='inner'></div>");
this.wrapper.css("width" , this.width);
this.wrapper.css("height" , this.height);
this.wrapper.css("border" , "solid 0px white");
this.wrapper.css("overflow" , "hidden");
this.wrapper.css("-webkit-box-sizing" , "border-box");
this.wrapper.css("-moz-box-sizing" , "border-box");
this.wrapper.css("-o-box-sizing" , "border-box");
this.wrapper.css("-ms-box-sizing" , "border-box");
this.wrapper.css("box-sizing" , "border-box");
this.inner = $(".inner");
this.inner.css("width" , "100%");
this.inner.css("height" , "100%");
this.inner.css("background-image" , "url('./images/slide01.jpg')"); //デフォルトではslide01.jpg
//ここから下のCSS重要
this.inner.css("background-repeat" , "no-repeat");
this.inner.css("background-position" , "center");
this.inner.css("backgroundSize" , "cover");
this.inner.css("-webkit-transition" , "all\t" + this.innerDuration);
this.inner.css("-moz-transition" , "all\t" + this.innerDuration);
this.inner.css("-o-transition" , "all\t" + this.innerDuration);
this.inner.css("-ms-transition" , "all\t" + this.innerDuration);
this.inner.css("transition" , "all\t" + this.innerDuration);
this.start();
this.resize();
}
Slider.prototype.start = function() {
var count = this.count;
var speed = this.speed;
var dataset = this.dataset;
var inner = this.inner;
this.wrapper.animate({"borderWidth": "15px"} , 500 , function() {
window.setInterval(function() {
count += 1;
count %= dataset.length; //countを配列の要素の数で割った余り(これにより繰り返しを実現する)
inner.css("background-image" , "url('./images/" + dataset[count] + "')");
} , speed);
});
};
Slider.prototype.resize = function() {
var wrapper = this.wrapper;
$(window).resize(function() {
wrapper.css("width" , $(this).width() + "px");
wrapper.css("height" , $(this).height() + "px");
});
};
var slider = new Slider("slider-wrapper");
</script>
</body>
</html>