Skip to main content
se añadieron 1866 caracteres en el cuerpo
Origen Enlace

Veréis estoy haciendo un slider con Bootstrap 4 que ocupa el 100% del alto (height: 100vh; width: 100%;) y las imágenes que estoy usando al ponerlas en tamaño de móvil en vez de coger la imagen original y hacer un zoom lo que hace es deformarla. Mi segundo problema es que al poner estás imágenes en el slider no salen centradas ya que el ancho de la pantalla es menor al de la imagen y al ponerlas salen descentradas tanto vertical como horizontalmente (estoy usando no background-img). Esto podría hacerse editando las imágenes pero quiero saber si se puede hacer con CSS o js. El tercer problema sería como alinear el texto de carousel-caption en el centro en vez de debajo donde se pone por defecto (he visto algún post que lo hacían con traslaciones de css en Y pero no me ha quedado muy claro. Gracias

HTML

<div id="mainCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#mainCarousel" data-slide-to="1"></li>
        <li data-target="#mainCarousel" data-slide-to="2"></li>
        <li data-target="#mainCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner slider">
        <div class="carousel-item active">
          <img class="d-block w-100" src="img/slides/slide1.jpg" alt="First slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide3.jpg" alt="Third slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide4.jpg" alt="Forth slide">
            <div class="carousel-caption d-flex justify-content-center align-items-cent">
                <h3>Route</h3>
            </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

CSS

.slider{
height: 100vh;
max-width: 100%;}

Veréis estoy haciendo un slider con Bootstrap 4 que ocupa el 100% del alto (height: 100vh; width: 100%;) y las imágenes que estoy usando al ponerlas en tamaño de móvil en vez de coger la imagen original y hacer un zoom lo que hace es deformarla. Mi segundo problema es que al poner estás imágenes en el slider no salen centradas ya que el ancho de la pantalla es menor al de la imagen y al ponerlas salen descentradas tanto vertical como horizontalmente (estoy usando no background-img). Esto podría hacerse editando las imágenes pero quiero saber si se puede hacer con CSS o js. Gracias

Veréis estoy haciendo un slider con Bootstrap 4 que ocupa el 100% del alto (height: 100vh; width: 100%;) y las imágenes que estoy usando al ponerlas en tamaño de móvil en vez de coger la imagen original y hacer un zoom lo que hace es deformarla. Mi segundo problema es que al poner estás imágenes en el slider no salen centradas ya que el ancho de la pantalla es menor al de la imagen y al ponerlas salen descentradas tanto vertical como horizontalmente (estoy usando no background-img). Esto podría hacerse editando las imágenes pero quiero saber si se puede hacer con CSS o js. El tercer problema sería como alinear el texto de carousel-caption en el centro en vez de debajo donde se pone por defecto (he visto algún post que lo hacían con traslaciones de css en Y pero no me ha quedado muy claro. Gracias

HTML

<div id="mainCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#mainCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#mainCarousel" data-slide-to="1"></li>
        <li data-target="#mainCarousel" data-slide-to="2"></li>
        <li data-target="#mainCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner slider">
        <div class="carousel-item active">
          <img class="d-block w-100" src="img/slides/slide1.jpg" alt="First slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide3.jpg" alt="Third slide">
        </div>
        <div class="carousel-item slider">
          <img class="d-block w-100" src="img/slides/slide4.jpg" alt="Forth slide">
            <div class="carousel-caption d-flex justify-content-center align-items-cent">
                <h3>Route</h3>
            </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

CSS

.slider{
height: 100vh;
max-width: 100%;}
Origen Enlace

Imágenes responsive

Veréis estoy haciendo un slider con Bootstrap 4 que ocupa el 100% del alto (height: 100vh; width: 100%;) y las imágenes que estoy usando al ponerlas en tamaño de móvil en vez de coger la imagen original y hacer un zoom lo que hace es deformarla. Mi segundo problema es que al poner estás imágenes en el slider no salen centradas ya que el ancho de la pantalla es menor al de la imagen y al ponerlas salen descentradas tanto vertical como horizontalmente (estoy usando no background-img). Esto podría hacerse editando las imágenes pero quiero saber si se puede hacer con CSS o js. Gracias