图像轮播：强制图像占据整个div（每个图像）

Question

无论image的大小如何，我都需要一种强制每个div填充div的方法。我认为这是width: 100%应该做的事情，但它没有像我预期的那样工作。

Link to CodePen

＆＃13;

＆＃13;

const carousels = document.querySelectorAll('.image-carousel');

[].forEach.call(carousels, c => {
  let next = document.querySelector('.next'),
        prev = document.querySelector('.previous'),
        bubblesContainer = document.querySelector('.bubbles'),
        inner = document.querySelector('.inner'),
        imgs = document.querySelectorAll('img'),
        currentImageIndex = 0,
        width = 100,
        bubbles = [];
  
  for (let i = 0; i < imgs.length; i++) {
    let b = document.createElement('span');
    b.classList.add('bubble');
    bubblesContainer.append(b);
    bubbles.push(b);
    
    b.addEventListener('click', () => {
      currentImageIndex = i;
      switchImg();
    });
  }
  
  function switchImg() {
    inner.style.left = -width * currentImageIndex + '%';
    
    bubbles.forEach(function (b, i) {
      if (i === currentImageIndex) {
        b.classList.add('active');
      } else {
          b.classList.remove('active');
      }
    });
  }
  
  next.addEventListener('click', () => {
    currentImageIndex++;
    
    if (currentImageIndex >= imgs.length) {
      currentImageIndex = 0;
    }
    
    switchImg();
  });
  
  prev.addEventListener('click', () => {
    currentImageIndex--;
    
    if (currentImageIndex < 0) {
      currentImageIndex = imgs.length - 1;
    }
    
    switchImg();
  });
  
  switchImg();
});

＆＃13;

img {
  height: 100%;
  min-width: 100%;
}
.image-carousel {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.image-carousel .inner {
  display: flex;
  position: absolute;
  left: 0;
  transition: left 0.5s;
  width: 100%;
  height: 100%;
}
.image-carousel .bubbles {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 5px;
}
.image-carousel .bubbles .bubble {
  margin: 0 1rem 0.5rem;
  background: white;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  display: inline-block;
  opacity: 0.25;
  transition: 0.1s;
  cursor: pointer;
}
.image-carousel .bubbles .bubble:hover {
  opacity: 0.65;
}
.image-carousel .bubbles .bubble.active {
  opacity: 1;
}
.image-carousel .next::after, .image-carousel .previous::after {
  content: '>';
  position: absolute;
  top: 50%;
  right: 0;
  background: white;
  width: 1rem;
  height: 3rem;
  font-weight: bold;
  transform: translatey(-50%);
  line-height: 3rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  cursor: pointer;
}
.image-carousel .previous::after {
  left: 0;
  content: '<';
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="image-carousel">
        <div class="inner">
          <img class="carousel one" src="https://via.placeholder.com/100x100">
          <img class="carousel two" src="https://via.placeholder.com/100x100">
          <img class="carousel three" src="https://via.placeholder.com/100x100">
          <img class="carousel three" src="https://via.placeholder.com/100x100">
        </div>
        <div class="bubbles"></div>
        <div class="previous"><button>&lt;</button></div>
        <div class="next"><button>&gt;</button></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于您已将.inner元素的显示属性设置为flex。

您可以删除flex或将flex: 0 0 100%添加到您的图片中，如下所示：

.inner {
  ..
  img {
    flex: 0 0 100%;
  }
}

flex: 0 0 100%告诉Flex容器内的元素不缩小或展开，并占用其父级的100％。