レスポンシブサイトのスライドショーで不明な隙間ができる

下記は、レスポンシブサイトです。

スライドショーの部分なのですが、ウインドウサイズを小さくすると下に大きな隙間ができてしまいます。
隙間を無くす方法はありますでしょうか？
Chromeの検証機能を使って調べてみても隙間が無い事になっていて、原因も不明です。

「ウインドウ最大サイズ時」

「ウインドウを縮めた時」

＜HTML＞

<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main_style.css">
<meta charset="UTF-8">
<title>株式会社テスト</title>
</head>

<body>
<header>
  <nav class="clearfix"> 
    
    <!-- logo -->
    <div class="logo">
      <h1><a href="index.html"><span>株式会社テスト</span></a></h1>
    </div>
    <!-- logo -->
    
    <ul>
      <li class="menu01"><a href="#">ホーム<br>
        <span>HOME</span></a></li>
      <li class="menu02"><a href="#">会社概要<br>
        <span>COMOPANY</span></a></li>
      <li class="menu03"><a href="#">事業内容<br>
        <span>WORKS</span></a></li>
      <li class="menu04"><a href="#">ニュース<br>
        <span>NEWS</span></a></li>
      <li class="menu05"><a href="#">採用情報<br>
        <span>RECRUIT</span></a></li>
      <li class="menu06"><a href="#">お問い合わせ<br>
        <span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>
<section class="main_slide">
  <div class="slide"> <img src="img/slideshow/slide1.jpg"> <img src="img/slideshow/slide2.jpg"> <img src="img/slideshow/slide3.jpg"> <img src="img/slideshow/slide4.jpg"> <img src="img/slideshow/slide5.jpg"> </div>
</section>
<section> 
  
  <!-- company_dscription -->
  <div id="company_discription">
    <p>あなたのビジネスパートナー</p>
  </div>
  <!-- company_dscription --> 
</section>
</body>
</html>

＜CSS＞

@media all and (min-width: 608px) {
	
* {
	margin:0;
	padding:0;
}

body {
	color:#333;
	margin: 0;
}

.logo {
	float:left;
	width:250px;
	padding-right:20px;
}



a:hover {
	transition: 0.5s ;
	background: #EEE;
	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity=40)";
	
}

h1 {
  	width:250px;
  	height:71px;
  	background-image:url("../img/logo.png");
  	background-repeat:no-repeat;
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:250px;
  	height:71px;
}

nav {
	background-color:#fff;
	padding-top:10px;
	display: flex;
	justify-content: center;
	height: 83px; /* 高さ */
  	width: 100%; /* 長さ */
  	position: fixed; /* ヘッダーを固定(これが重要) */
  	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
  	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	z-index:1
}

nav li {
	list-style:none;
	float:left;
	text-align:center;
	overflow: hidden;
	
}

nav .menu01, .menu02, .menu03, .menu04, .menu05, .menu06 {
	width:125px;
	background-color:#FFF;
	font-weight:bold;
}

nav .menu02, .menu03, .menu04, .menu05, .menu06 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   
}

nav a {
	width:100%;
	display:block;
}

nav span {
	
	color:#CCC;
	font-weight:100;
	line-height:3em;
}

nav a:link { color: #333; }
nav a:visited { color: #333; }
nav a:hover { color: #333; }
nav a:active { color: #333; }

a {
	text-decoration:none;
}

.clearfix {
 *zoom: 1;
}
.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

/*スライダー*/
/*=== 画像の表示エリア ================================= */
.main_slide {
    position : relative;
    overflow : hidden;
	background-color:blue;
	padding-top:93px;
	height:600px;
}

.slide {
	
}

/*=== 画像の設定 ======================================= */

.slide img {
    display: block;
    position : absolute;
	max-width:100%;
    left:100%;
    animation : slideAnime 15s ease infinite;
	margin-left: 50%;
    transform: translateX(-50%);
}

#company_discription {
	background-image:url(../img/sc2_nk_flag_bg.jpg) ,url(../img/sc2_nk_flag_bg_1px.jpg);
	background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	repeat; /* 再背面の背景レイヤーに対応 */
  	height: 150px;
  	display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
}

#company_discription p {
	text-align:center;
	color:#faee00;
	font-size:36px;
	font-weight:bold;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
	animation-delay: 0s
}
.slide img:nth-of-type(2) {
	animation-delay: 3s
}
.slide img:nth-of-type(3) {
	animation-delay: 6s
}
.slide img:nth-of-type(4) {
	animation-delay: 9s
}
.slide img:nth-of-type(5) {
	animation-delay: 12s
}

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
 0% {
left: 100%
}
 1% {
left: 0
}
 19% {
left: 0
}
 20% {
left: -100%
}
 100% {
left: -100%
}
}

}

.slide img {
    display: block;
    position : absolute;
	max-width:100%;
    left:100%;
    animation : slideAnime 15s ease infinite;
	margin-left: 50%;
    transform: translateX(-50%);
}

ここのmax-widthをmax-width:1280pxと画像の横幅サイズをしていすると以下のように
次の画像がかぶさって表示されます。

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

回答1件

ベストアンサー

css
1.slide img {
2    max-width:100%;
3}

が原因だと思います。

画像が高さ600pxのときの幅に指定すれば直るかと。

追記

これでいけませんか？

html
1	  <img src="http://placehold.jp/24/cccccc/ffffff/1280x600.png?text=スライド1">
2	  <img src="http://placehold.jp/24/dfdfdf/ffffff/1280x600.png?text=スライド2">
3	  <img src="http://placehold.jp/24/cccccc/ffffff/1280x600.png?text=スライド3">
4	  <img src="http://placehold.jp/24/dfdfdf/ffffff/1280x600.png?text=スライド4">
5	  <img src="http://placehold.jp/24/aaaaaa/ffffff/1280x600.png?text=スライド5">
6

css
1/*=== 画像の表示エリア ================================= */
2.main_slide {
3    position : relative;
4    overflow : hidden;
5    background-color:blue;
6    padding-top:93px;
7}
8
9.slide {
10    height:46.8vw;
11}
12
13/*=== 画像の設定 ======================================= */
14
15.slide img {
16    display: block;
17    position : absolute;
18    max-width: inherit;
19    width: 100%;
20    left:100%;
21    animation : slideAnime 15s ease infinite;
22    margin-left: 50%;
23    transform: translateX(-50%);
24}
25

画像のパスは、自分のやりやすいように買えています。

CSSでは、幅に合わせて高さが可変するように、「.slide」に対して600px/1280pxを「vw」の単位で出しています。

また、下記の指定で、拡大されても横みっちりつく様にしています。

css
1    max-width: inherit;
2    width: 100%;
3

投稿2018/03/16 14:54

編集2018/03/16 16:24

kszk311

総合スコア3404

退会済みユーザー

2018/03/16 14:56

すいません。無知で申し訳ないのですが、htmlの画像の部分で高さを指定するとか明示すればいいということでしょうか？

kszk311

2018/03/16 14:59

えっと、じゃあ img/slideshow/slide1.jpg ~ img/slideshow/slide5.jpg のサイズ（幅、高さ）をまず教えて下さい

退会済みユーザー

2018/03/16 15:22

1280x600です。

kszk311

2018/03/16 15:31

では、CSSの.slide imgにかかっている max-width:100%;を、1280pxにすると、空白がなくなると思います。

退会済みユーザー

2018/03/16 15:38

ありがとうございます。空白はなくなりましたが、次に表示される画像が右からかぶさって表示されてしまいました。

退会済みユーザー

2018/03/16 15:39

質問を編集してありがとうございます。空白はなくなりましたが、次に表示される画像が右からかぶさって表示された画像を追加しますね。

kszk311

2018/03/16 15:45

それでは、どういう表示にしたいのかを教えてください。・下は空白あけない・横は真ん中・画像の幅よりウィンドウが広ければ、それに合わせて拡大させるなど、具体的な見え方を。また、ここの動作と同じ様にしたいなどの参考URLがあれば教えて下さい。

退会済みユーザー

2018/03/16 15:50

説明不足ですみません。・下は空白を開けない。・画像は中央に配置・スライドショーなので１枚１枚表示させたいのでウインドウを縮めても次の画像が写り込まないようにしたい。・画像の幅よりウィンドウが広ければ、それに合わせて拡大させるです。 https://webparts.cman.jp/img/slideshow/ ここを参考にしたといいますか、半分コピペしてスライドショーを作りました。

kszk311

2018/03/16 16:01

なるほど、「画像の幅よりウィンドウが広ければ、それに合わせて拡大させる」ですが、「高さは固定のまま、上下ははみ出しても良い」ではなく、「拡大しつつ、高さも幅に合わせて可変」の方ですかね。

退会済みユーザー

2018/03/16 16:25

そうです！ https://reco-support.co.jp/ こちらのサイトのスライドショーのように可変したいのです。

kszk311

2018/03/16 16:26

丁度今追記したんですが、追記したほうの動きではないですか？

退会済みユーザー

2018/03/16 17:07 編集

すいません！「高さは固定のまま、上下ははみ出しても良い」ではなく、「拡大しつつ、高さも幅に合わせて可変」の方で正しいです。一応レスポンシブサイトとして参考にしたサイトのURLを記載させていただきました。スライドショーとしては参考にしていません。

退会済みユーザー

2018/03/16 17:08

今修正いただいたものを試しています。

退会済みユーザー

2018/03/16 17:12

うまくいきました！max-widthを継承にすればよかったんですね！ありがとうございます！何度も申し訳ないですが100%や1280pxと指定するのと継承にするのとでは何が違うのでしょうか？

kszk311

2018/03/16 17:23

max-width: 100%;は、親の幅が最大値 max-width: 1280px;は、width: 100%;とか、max-widthより大きなwidthを指定していても、1280pxが最大値 max-widthは初期値がnoneのため、max-width: inherit;すると、max-widthの指定を解除（max-width: none;でもいいですね）

退会済みユーザー

2018/03/16 17:31

なるほど。width: 100%;とか、max-widthより大きなwidthを指定していても、1280pxが最大値だから空白ができたってことなのでしょうか。空白ができる理屈がイマイチりかいできてなくて、色々きいてしまってすいません。

kszk311

2018/03/16 17:36 編集

今回の、下に空白が出来た原因は、ウィンドウ幅が1280px以下のときに、画像がそれに合わせて小さくなるため、高さも600pxより小さくなるが、親の. main_slideで600pxを指定しているからです。

退会済みユーザー

2018/03/16 17:53 編集

なるほど！それで親は600pxのままだから画面を縮めるとその分空白ができちゃうんですね！ご丁寧にありがとうございます。

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