图像一开始没有完全加载，只有在刷新后

Question

I made a django application which is online at: https://www.casualspotter.com/ . On my homepage I have a carousel with multiple images. The problem I'm having is that for some reason the images don't load fully. After refreshing the page the images do load fully.

The carousel code:

<div class="carousel carousel-slider" id="demo-carousel-content" data-indicators="true" >
  <a class="carousel-item" href="/cp_company">
      <img class='carouselitem' src="{% static 'images/cp_company.jpg' %}">
      <h2 class="bottom-left">C.P. COMPANY</h2>
  </a>
    <a class="carousel-item" href="/stone_island">
      <img class='carouselitem' src="{% static 'images/stone_island.jpg' %}">
        <h2 class="bottom-left">STONE ISLAND</h2>
  </a>
    <a class="carousel-item" href="/ma_strum">
      <img class='carouselitem' src="{% static 'images/mastrum.jpg' %}">
        <h2 class="bottom-left">MA.STRUM</h2>
  </a>
    <a class="carousel-item" href="/barbour">
      <img class='carouselitem' src="{% static 'images/barbour_lookbook.jpg' %}">
        <h2 class="bottom-left">BARBOUR</h2>
  </a>
    <a class="carousel-item" href="/lacoste">
      <img class='carouselitem' src="{% static 'images/lacoste_banner.jpg' %}">
        <h2 class="bottom-left">LACOSTE</h2>
  </a>
    <a class="carousel-item" href="/perry">
      <img class='carouselitem' src="{% static 'images/perry_banner.jpg' %}">
        <h2 class="bottom-left">FRED PERRY</h2>
  </a>
    <a class="carousel-item" href="/paul_shark">
      <img class='carouselitem' src="{% static 'images/paul_shark_banner.jpg' %}">
        <h2 class="bottom-left">PAUL & SHARK</h2>
  </a>
    <a class="carousel-item" href="/napa">
      <img class='carouselitem' src="{% static 'images/napa_banner.jpg_large' %}">
        <h2 class="bottom-left">NAPAPIJRI</h2>
  </a>
    <a class="carousel-item" href="/tnf">
      <img class='carouselitem' src="{% static 'images/tnf_banner.jpg' %}">
        <h2 class="bottom-left">THE NORTH FACE</h2>
  </a>
</div>

CSS:

img.carouselitem{
    height: auto;
}

Thanks in advance!

Answer 1

try this

.carousel.carousel-slider {
    height: 100vh;
}

add it to end of your styles.