Slickを全画面表示にしたときに画像の縦横比を固定して中央を基準にしたい

以下のようなコードで、slickを使用しています。

HTML
1<head>
2（中略）
3	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
4	<meta name="viewport" content="width=device-width, initial-scale=1" />
5	<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
6	<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
7	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
8</head>
9
10<body>
11<div id="container">
12
13（中略）
14
15<div class="slider">
16	<div class="slick-slide"><img src="img/img1_19201080.jpg" alt="" /></div>
17	<div class="slick-slide"><img src="img/img2_19201080.jpg" alt="" /></div>
18	<div class="slick-slide"><img src="img/img3_19201080.jpg" alt="" /></div>
19</div>
20
21（中略）
22
23</div><!-- /container -->
24
25<script src="slick/slick.min.js"></script>
26	<script>
27		$(function() {
28			$('.slider').slick({
29				accessibility:false,
30				autoplay:true,
31				autoplaySpeed:3000,
32				speed:3000,
33				pauseOnHover:false,
34				dots:false,
35				fade:true,
36				infinite:true,
37				arrows:false,
38			});
39		});
40	</script>
41</body>

CSS
1#container{
2	position:relative;
3}
4
5.slider{
6	width:100%;
7	height:calc(100vh - 32px);
8	position:absolute;
9	top:0;
10	left:0;
11	margin:0 auto;
12	text-align:center;
13}
14
15.slider img{
16	width:100%;
17	height:calc(100vh - 32px);
18	margin: 0 auto;
19	text-align:center;
20}
21

heightはヘッダーを32pxにしたいので100vhから32pxを引きました。

現在の、.slider img{width:100%;}
または.slider img{width:100vw;}
だと、画像の高さは画面に合うのですが、幅が左右に伸縮してしまいます。

.slider img{width:auto;}
.slider img{width:1920px;}
などにすると、縦横比は固定されるのですが、画像が左揃えになって右側のみがはみ出してしまいます。
position:absolute; top:0; left:0;
を削除しても同じ状態です。

slickのオプション、CSSの設定、JSの設定等いろいろためして見ていますが、
・スライダーはデバイスの高さを基準にして全画面で表示したい
・画像の縦横比は変えたくない
ウインドウ幅が狭くなった場合は、中央部を表示して、左右にはみ出したい
がうまくいかない状況です。

説明がわかりにくいと思いますが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

object-fit とかどうでしょう。

【【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita】
https://qiita.com/suin/items/8de26866a8ab6ca65ba4

【1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

投稿2018/05/11 08:22

kei344

総合スコア69398

toritoritori

2018/05/11 15:27

ありがとうございます！ ```CSS .slider{ width:100vw; height:calc(100vh - 32px); position:absolute; top:0; left:0; margin:0 auto; text-align:center; } .slider img{ object-fit:cover; width:100%; height:calc(100vh - 32px); margin: 0 auto; text-align:center; } .slider img.coverPosition{ object-position:100% 50%; ``` という感じでできました。 CSSでトリミングした上にトリミング位置まで調整できるんですね。とても助かりました。ありがとうございます。

行動規範の内容に同意します