サンプルコードを組み合わせたところ、画像に隙間ができる原因

前提・実現したいこと

ハンバーガーメニューとスライダーを組み合わせたサンプルコードですが、スライダーの
画像がヘッダーバーの上部より少し下で隙間ができてしまうので隙間部分を無くしたい。

発生している問題・エラーメッセージ

隙間を無くしたい

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>MENU</title>
6<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
7<link href="css/menu.css" rel="stylesheet" type="text/css">
8<link href="css/slider.css" rel="stylesheet" type="text/css">
9<link href="css/container.css" rel="stylesheet" type="text/css">
10<script type=<"css/slider.css" rel="stylesheet" type="text/css"></script>
11</head>
12
13<body>
14<input type="checkbox" role="button" title="menu" id="humberger_check" />
15<label for="humberger_check" class="humberger" aria-hidden="true" title="menu">
16  <span></span>
17</label>
18<header class="header_bar">
19  <h1>SITE TITLE</h1>
20</header>
21<main class="container">
22  <section class="content">
23    <h2>3D Rotating Hidden Menu</h2>
24  </section>
25</main>
26<nav class="hidden_menu">
27  <ul>
28    <li data-bar-color="#FA3687">
29      <a href="#"><i class="icon-picture"></i>IMAGE</a>
30    </li>
31    <li data-bar-color="#21D7A8">
32      <a href="#"><i class="icon-film"></i>VIDEO</a>
33    </li>
34    <li data-bar-color="#1E9ED4">
35      <a href="#"><i class="icon-music"></i>MUSIC</a>
36    </li>
37    <li data-bar-color="#B0D44A">
38      <a href="#"><i class="icon-headphones"></i>PERSONAL</a>
39    </li>
40    <li data-bar-color="#A865D5">
41      <a href="#"><i class="icon-cogs"></i>SETTINGS</a>
42    </li>
43  </ul>
44  <span class="menu_underline"></span>
45</nav>
46
47<section class="swiper-container loading">
48  <div class="swiper-wrapper">
49    <div class="swiper-slide" data-test-set="test" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)">
50      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" />
51      <div class="content">
52        <p class="title">Shaun Matthews</p>
53        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
54      </div>
55    </div>
56    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)">
57      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" />
58      <div class="content">
59        <p class="title">Alexis Berry</p>
60        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
61      </div>
62    </div>
63    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)">
64      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" />
65      <div class="content">
66        <p class="title">Billie Pierce</p>
67        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
68      </div>
69    </div>
70    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)">
71      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" />
72      <div class="content">
73        <p class="title">Trevor Copeland</p>
74        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
75      </div>
76    </div>
77    <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)">
78      <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" />
79      <div class="content">
80        <p class="title">Bernadette Newman</p>
81        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
82      </div>
83    </div>
84  </div>
85  
86  <!-- If we need pagination -->
87  <div class="swiper-pagination"></div>
88  <!-- If we need navigation buttons -->
89  <div class="swiper-button-prev swiper-button-white"></div>
90  <div class="swiper-button-next swiper-button-white"></div>
91</section>
92
93<script type="text/javascript" src="js/swiper.min.js"></script>
94<script type="text/javascript" src="lib/jquery-3.5.0.min.js"></script>
95<script type="text/javascript" src="js/menu.js"></script>
96<script src="js/slider.js"></script>
97</body>
98</html>

CSS
1@charset "utf-8";
2
3[class^="swiper-button-"], .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
4  -webkit-transition: all .3s ease;
5  transition: all .3s ease;
6}
7
8[class^="swiper-slide-shadow-"] {
9  backface-visibility: hidden;
10  -webkit-backface-visibility: hidden;
11}
12
13*, *:before, *:after {
14  box-sizing: border-box;
15  margin: 0;
16  padding: 0;
17}
18
19body {
20	background-color: #888;
21	clear: both;
22}
23
24.swiper-container {
25  width: 100%;
26  height: 34vw;
27  -webkit-transition: opacity .6s ease, -webkit-transform .3s ease;
28  transition: opacity .6s ease, -webkit-transform .3s ease;
29  transition: opacity .6s ease, transform .3s ease;
30  transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease;
31}
32.swiper-container:hover .swiper-button-prev,
33.swiper-container:hover .swiper-button-next {
34  -webkit-transform: translateX(0);
35          transform: translateX(0);
36  opacity: 1;
37  visibility: visible;
38}
39.swiper-container.loading {
40  opacity: 0;
41}
42.swiper-container.scale-out {
43  -webkit-transform: scale(0.7);
44          transform: scale(0.7);
45}
46.swiper-container.scale-in {
47  -webkit-transform: scale(1);
48          transform: scale(1);
49}
50
51.swiper-slide {
52  background-position: center;
53  background-size: cover;
54  -webkit-perspective: 1600px;
55          perspective: 1600px;
56}
57.swiper-slide.swiper-slide-active {
58  z-index: 2;
59}
60.swiper-slide .entity-img {
61  display: none;
62}
63.swiper-slide .content {
64  position: absolute;
65  top: 40%;
66  left: 0;
67  width: 50%;
68  padding-left: 5%;
69  color: #fff;
70  -webkit-transform: translateZ(100px) translateX(100px);
71          transform: translateZ(100px) translateX(100px);
72}
73.swiper-slide .content .title {
74  font-size: 2.5em;
75  font-weight: bold;
76  margin-bottom: 30px;
77}
78.swiper-slide .content .caption {
79  display: block;
80  font-size: 12px;
81  line-height: 1.4;
82}
83
84[class^="swiper-button-"] {
85  width: 44px;
86  opacity: 0;
87  visibility: hidden;
88}
89
90.swiper-button-prev {
91  -webkit-transform: translateX(50px);
92          transform: translateX(50px);
93}
94
95.swiper-button-next {
96  -webkit-transform: translateX(-50px);
97          transform: translateX(-50px);
98}
99
100.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
101  margin: 0 9px;
102  position: relative;
103  width: 12px;
104  height: 12px;
105  background-color: #fff;
106  opacity: .4;
107}
108.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet::before {
109  content: '';
110  position: absolute;
111  top: 50%;
112  left: 50%;
113  width: 18px;
114  height: 18px;
115  -webkit-transform: translate(-50%, -50%);
116          transform: translate(-50%, -50%);
117  border: 0px solid #fff;
118  border-radius: 50%;
119}
120.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:hover, .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
121  opacity: 1;
122}
123.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
124  border-width: 1px;
125}

試したこと

slider cssのbodyに
margin: 0;
padding: 0;

補足情報（FW/ツールのバージョンなど）

dreamweaver cs6 chrome

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

回答1件

ベストアンサー

<img />についてらっしゃる、 entity-imgクラスに**object-fit:cover;**をつけてみては、

いかがでしょうか

もしかしたら、解決するかもしれません。

解決しなかったら、申し訳ありません。

投稿2020/06/18 13:25

ff7575

総合スコア123

cht

2020/06/19 00:49

ff7575様ありがとうございます。試しに entity-imgクラスにobject-fit:cover;を追記してみましたが結果は変わらずでした。

ff7575

2020/06/19 01:01 編集

左様ですか。申し訳ありません。 <div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> 新たに確認してみると、background-imageで画像を背景にしてらっしゃるようです。ここのstyleにbackground-sizeや、background-positionを用いて画像の大きさや位置が動くか確認をお願いできますか。もし、動けばそこをどうにかできるかもしれません

cht

2020/06/19 01:26

ff7575様ありがとうございますそれでは少し時間をいただきながら、やってみます。

cht

2020/06/19 02:19

ff7575様 .swiper-slide .entity-img { display: none; position: absolute; height: 300px; width: 500px; } のように変更してみたのですが、変化はありませんでした。

ff7575

2020/06/19 02:32

<div class="swiper-slide" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s); background-size:256px 256px; background-position:100% 200%;"> background-size:256px 256px; background-position:100% 200%; これを追加です

cht

2020/06/19 03:06

ff7575様 htmlに上記のコードを追記したところ、画像が分割された状態で表示され、隙間は埋まりませんでした。

ff7575

2020/06/19 03:14

swiper-slideクラスがつく要素に「margin-top:-8px;」は追加できますか

cht

2020/06/19 03:24

ff7575様 body { background-color: #888; clear: both; margin-top:-8px; } を加えたら空白が狭くなったようです

cht

2020/06/19 03:26

ff7575様 body { background-color: #888; clear: both; margin-top:-20px; } に数値を変更したところ空白はなくらいました。ありがとうございました。感謝申し上げます。