背景颜色在一个位置不稳定

Question

我正在自定义Slick Slider的外观。

我在其上创建的灰色背景.media-slider具有一定的高度，并且放置了箭头以使其与灰色背景的顶部对齐：

这是灰色背景：

.media-slider-wrap .media-slider {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
}
.media-slider-wrap .media-slider:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #eff3f5;
  display: block;
  height: 55.1%;
  z-index: -1;
}

我将箭头定位如下：

.media-slider-wrap .media-slider {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
}
.media-slider-wrap .media-slider:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #eff3f5;
  display: block;
  height: 55.1%;
  z-index: -1;
}

这是我在灰色背景的顶部与箭头的顶部对齐的位置进行的对齐：

但是，当我向p标签添加更多文本或将h1更改为较小尺寸的h标签时，就会发生这种情况。随着越来越多的内容添加到文本中，灰色背景正在下降。

如何解决将箭头顶部和灰色背景围绕图像中心对齐的问题？我怀疑我必须更改创建灰色背景的方式。

同样在非常小的屏幕上（iphone 5屏幕尺寸），我正在像这样将另一张幻灯片推到当前幻灯片，不确定是否是由相同的问题引起的

这是我的完整代码：

.media-slider-wrap .media-slider-text-slider .slick-prev, .media-slider-wrap .media-slider-text-slider .slick-next {
    background-color: #d4272e;
    height: 40px;
    width: 40px;
    z-index: 1;
    left: 0;
    top: 54%;
}

$(document).ready(function() {

  $(".media-slider-bg-slide").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.media-slider-text-slider',
  });


  $(".media-slider-text-slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    centerPadding: '0px',
    asNavFor: '.media-slider-bg-slide',
    centerMode: false,
    focusOnSelect: true,
    speed: 1000,
    arrows: true,
  });


});

jQuery(window).on('load', function() {
  function getImage() {
    jQuery(".media-slider-wrap .media-slider-img-wrap").each(function() {
      var imgSrc = $(this).find("img").attr("src");
      $(this).css('background-image', 'url(' + imgSrc + ')');
    });
  }
  getImage();
});

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Teko', sans-serif;
}

html {
  font-size: 18px;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }
}

h1,
.h1 {
  font-size: 3.815rem;
}

h2,
.h2 {
  font-size: 2.441rem;
}

h3,
.h3 {
  font-size: 1.563rem;
}

h4,
.h4 {
  font-size: 1.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Teko', sans-serif;
}

.media-slider-wrap .media-slider-text-wrap {
  padding-top: 16%;
  padding-left: 1rem;
}

.media-slider-wrap .media-slider-text-wrap h1 {
  color: #fff;
  font-weight: normal;
  letter-spacing: 1.5px;
}

.media-slider-wrap .media-slider-text-slider {
  color: #fff;
  padding: 2%;
}

.media-slider-wrap .media-slider-text-slider .slick-prev,
.media-slider-wrap .media-slider-text-slider .slick-next {
  background-color: #d4272e;
  height: 40px;
  width: 40px;
  z-index: 1;
  left: 0;
  top: 54%;
}

.media-slider-wrap .media-slider-text-slider .slick-list {
  padding-top: 1rem;
}

.media-slider-wrap .media-slider-text-slider .slick-next {
  margin-top: 40px;
}

.media-slider-wrap .media-slider-text-slider .slick-arrow:hover {
  background-color: #721722;
}

.media-slider-wrap .media-slider {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem;
}

.media-slider-wrap .media-slider:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #eff3f5;
  display: block;
  height: 55.1%;
  z-index: -1;
}

.media-slider-wrap .slick-prev:before,
.media-slider-wrap .slick-next:before {
  font-family: 'Ionicons';
}

.media-slider-wrap .media-slider-img-wrap {
  background-size: cover;
  background-position: top-center;
}

.media-slider-wrap .media-slider-img-wrap img {
  opacity: 0;
  visibility: hidden;
}

.media-slider-wrap .media-slider-bg-slide {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.media-slider-wrap .media-slider-bg-slide div {
  height: 100%;
}

.media-slider-wrap .media-slider-bg-slide .slick-slide {
  margin: 0px;
}

.media-slider-wrap .media-slider-gradient-wrap {
  position: relative;
  overflow: hidden;
}

.media-slider-wrap .media-slider-gradient-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* background-color: #000;
  */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
}

.media-slider-wrap .pagingInfo {
  position: relative;
  left: 8rem;
  top: -10px;
  color: #fff;
}

.media-slider-wrap .media-slider-bg-slide img {
  height: 100vh;
  width: auto;
}

@media (max-width: 768px) {
  .media-slider-wrap .media-slider-text-wrap br {
    display: none;
  }
}

Answer 1

这是由于元滑块高度的变化所致。我看到您已按百分比定位按钮，1% 可能意味着不同比例和分辨率的许多像素。如果你想要像素完美，你可以限制元滑块的高度（以像素为单位）。您可以根据需要调整响应尺寸的高度。

.media-slider-wrap .media-slider-text-slider {
    height: 566px;
}