css - div 容器内的图像高度

Question

我在 div 中的图像有问题。这个带有 swiper__content 类的 div 为图像提供了一种底部填充，我看不出是什么导致了这种效果。我有一个 100% 的高度，没有填充或边距，所以它可能适合 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>

有没有办法去除它？

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>