jQueryのslickスライドショーで画像を左右中央に寄せたい

■ 実現したいこと
slickでカルーセルスライダーを作ろうとしています。
各画像のサイズが違っていても表示するモニターが変わっても次の条件で画像のスライドショーを表示できるようにしたいです。

（１）高さを基準にして表示（縦は画像の上から下まできちんと表示されるように）したい
（２）幅は左右切れてしまってもよいので左右位置を中央ぞろえにしたい

■ 起きている不具合

（１）は max-height:100vh;で実現できたようなのですが、（２）がどうしてもできません。
全ての画像が左寄せになってしまいます。

■ 解決のために試してみたこと
● margin:0 auto;
● object-fit: cover;
を.slider div img{}に設定しましたが、うまくいきませんでした。
古いjQuery（1.11.1）を使用していますが、事情があってどうしてもこれを使いたいと思っています。
どなたかわかる方よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1" />
6<title>slick デモ</title>
7<link rel="stylesheet" type="text/css" href="css/reset.css" />
8<link rel="stylesheet" type="text/css" href="css/slick.css" />
9<link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
10<link rel="stylesheet" type="text/css" href="css/style.css" />
11</head>
12
13<body>
14
15  <div class="slider">
16    <div><img src="img/画像１.jpg" alt="image03"></div>
17    <div><img src="img/画像２.jpg" alt="image03"></div>
18    <div><img src="img/画像３.jpg" alt="image03"></div>
19  </div>
20
21<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
22<script type="text/javascript" src="js/slick.min.js"></script>
23<script type="text/javascript">
24$(function(){
25	$('.slider').slick({
26	autoplay:true,
27	autoplaySpeed:3000,
28	dots:true,
29	dotsClass: 'slick-dots',
30	pauseOnHover:false,
31	pauseOnDotsHover:false,
32	swipeToSlide:true,
33	arrows:true,
34  });
35});
36</script>
37
38</body>
39</html>

css
1■ style.cssの内容 ■
2
3.slider{
4	margin-top:10px;
5	height: 700px;
6	max-width:900px;
7	margin:auto;
8 	overflow: hidden;
9}
10.slider div img{
11  max-height:100vh;
12  width:auto;
13}

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

回答2件

自己解決しました。

.slider div img{}の中身はmax-height:100vh;をやめて下記のように変更したところ、ウィンドウサイズが縦長でも横長でもスライドショー画像がしっかり中央に表示されるようになりました。
ご覧いただきありがとうございました。

css
1.slider div img{
2　　max-width: 100%;
3　　max-height: 100%;
4　　height: 90vh;
5　　object-fit:cover;
6　　margin:0 auto;
7}

投稿2021/03/24 09:18

kumacyan

総合スコア2

自己解決

自己解決しました。

.slider div img{}の中身はmax-height: 100%;をやめて下記のように変更したところ、ウィンドウサイズが縦長でも横長でもスライドショー画像が中央に表示されるようになりました。
ご覧いただきありがとうございました。

css
1.slider div img{
2　　max-width: 100%;
3　　max-height: 100%;
4　　height: 90vh;
5　　object-fit:cover;
6　　object-position: 50% 50%;
7　　margin:0 auto;
8}