Si algunas ves has creado un carrousel de imágenes es posible que se te haya presentado el problema de que las imágenes verticales no ocupal el 100% del espacio y queda un vacío a cada lado de la imagen.

Esto lo puedes solucionar estableciendo un color de backgraound también, pero yo preferí establecer la primera imagen de la galería de forma desenfocada como backgrond del carrousel. Quedando de esta forma:

En este caso estoy utilizando Bootstrap 4 en una plantilla con Django, pero es aplicable a cualquier situación.

<div id="carouselControls" class="carousel slide" data-ride="carousel">
        <div id="carouselExcursion" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="bg-image-default pt-5"></div>
            {% for foto in fotos %} 
            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <img 
                  src="{% thumbnail foto.foto 1500x300 crop %}" 
                  class="img-center d-block item-carrousel" alt="{{ excursion }}"
                >
            </div>
            {% endfor %}
          </div>
          <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>

Este ejemplo de código es un carrousel de Bootstrap 4 , excepto la linea 4, la cual hace la magia:

<div class="bg-image-default pt-5"></div>

Este elemento div es el encargado de establecer la imagen de background desenfocada a través de la clase bg-image-default

.bg-image-default {
    background-image: url('{% thumbnail excursion.image 310x200 crop %}');
    background-repeat: no-repeat;
    background-size: cover;     
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(16px);
    z-index: -1;
  }

Con esta clase establecemos una imagen de background que ocupe todo el espacio del div, le establecemos posición absolute y le aplicamos el filtro blur() con 16px de granulado de la imagen, este valor lo podemos modificar a nuestro gusto si queremos que la imagen sea más o menos nítida.

¿Porqué es necesario crear un div para la imagen de background? Pues porque si aplicamos el filtro blur() sobre un elemento padre todos los hijos lo heredarán, por tanto las imágenes de carrousel también se desenfocarán.

Espero que este pequeño truco pueda de ser de utilidad si te encuentras en esta situación.