div内の画像の高さ

Question

div内にある画像に問題があります。 swiper__contentクラスを持つこのdivは、画像に一番下の詰め物を与えています。私はこの効果の原因を見ることができません。それはDIV

.no-padding{ 
 
    padding: 0px 0px !important; 
 
} 
 
.swiper { 
 
    margin: 0 auto 50px; 
 
    width: 40%; 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    font-size: 10vw; 
 
    line-height: 1; 
 
    position: relative; 
 
    overflow: hidden; 
 
    text-transform: uppercase; 
 
    font-family: "Impact"; 
 
    cursor: pointer; 
 
} 
 

 
.swiper__content { 
 
    color: transparent; 
 
    display: block; 
 
    
 
} 
 
.swiper .swiper__content img{ 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 

 
transition: opacity 0s ease-in 0.5s; 
 
-moz-transition: opacity 0s ease-in 0.5s; 
 
-webkit-transition: opacity 0s ease-in 0.5s; 
 
-o-transition: opacity 0s ease-in 0.5s; 
 
    
 
} 
 
.swiper__bar, .swiper__bar--right { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: orange; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translateX(-100%); 
 
    transition: 1s ease-in-out; 
 
} 
 

 
.swiper__bar--right { 
 
    transform: translateX(100%); 
 
} 
 

 
.swiper.revealed .swiper__content { 
 
    animation-name: kf-font-reveal; 
 
    animation-duration: 1s; 
 
    color: orange; 
 
} 
 

 
.swiper.revealed .swiper__content img{ 
 
    opacity: 1; 
 

 

 
}

<div class="swiper no-padding revealed"> 
 
<div class="swiper__content"> 
 
<img src="http://lorempicsum.com/futurama/350/200/1"> 
 
</div> 
 
<span class="swiper__bar--right"></span> 
 
</div>

に合うかもしれないので、私はそれを削除する方法はありパディングやマージンなしで100％の高さを持っていますか？

Answer 1

swiperクラスのline-height: 0を設定してください。

.no-padding{ 
 
    padding: 0px 0px !important; 
 
} 
 
.swiper { 
 
    margin: 0 auto 50px; 
 
    width: 40%; 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    font-size: 10vw; 
 
    line-height: 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
    text-transform: uppercase; 
 
    font-family: "Impact"; 
 
    cursor: pointer; 
 
} 
 

 
.swiper__content { 
 
    color: transparent; 
 
    display: block; 
 
    
 
} 
 
.swiper .swiper__content img{ 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 

 
transition: opacity 0s ease-in 0.5s; 
 
-moz-transition: opacity 0s ease-in 0.5s; 
 
-webkit-transition: opacity 0s ease-in 0.5s; 
 
-o-transition: opacity 0s ease-in 0.5s; 
 
    
 
} 
 
.swiper__bar, .swiper__bar--right { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: orange; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translateX(-100%); 
 
    transition: 1s ease-in-out; 
 
} 
 

 
.swiper__bar--right { 
 
    transform: translateX(100%); 
 
} 
 

 
.swiper.revealed .swiper__content { 
 
    animation-name: kf-font-reveal; 
 
    animation-duration: 1s; 
 
    color: orange; 
 
} 
 

 
.swiper.revealed .swiper__content img{ 
 
    opacity: 1; 
 

 

 
}

<div class="swiper no-padding revealed"> 
 
<div class="swiper__content"> 
 
<img src="http://lorempicsum.com/futurama/350/200/1"> 
 
</div> 
 
<span class="swiper__bar--right"></span> 
 
</div>