0

Tengo un Carousel Boostrap, con 3 imagenes
Las 3 imagenes son las sgtes:
imagen1
imagen2
imagen3
Lo que quiero lograr, es posicionarlas verticalmente dentro de su propia sección,
De modo que quede el auto a la vista, y no la parte superior de la imagen.
Ahora mismo, las imagenes se veen asi:
https://i.gyazo.com/24bf43ad758066f9ceda1eab0728734b.gif


UPDATE#1

He logrado posicionarlas, pero tienen un efecto raro:
link
Los cambios que hice fueron:

.carousel-inner {
    height: 200px;
    position: relative;
}

.carousel-img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-inner>.active {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

html, body {
    background-size: cover;
    background-repeat: no-repeat;
    object-position: center;
    height: 100%;
    width: 100%;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
}

.footer {
    position: fixed;
    bottom: 0;
    clear: both;
    width: 100%;
    height: 16vh;
    background-color: rgb(128, 128, 128, 0.1);
    color: gray;
    font-size: 0.5vh;
}

.footerText {
    color: gray;
    font-size: 2vh;
}

.contenedor {
    text-align: center;
    display: contents;
}

.divinput {
    text-align: center;
    display: inline-block;
}

.inputl {
    width: 50vw;
    text-align: center;
}

a {
    color: gray;
}

a:hover {
    text-decoration: none;
    color: black;
}

.has-error .help-block {
    color: darkorange;
    background-color: black;
    margin-top: -0.5vh;
    border-radius: 5px;
}

.slogo {
    width: 30px;
}

.tales {
    width: 100%;
}

.carousel-inner {
    max-height: 200px !important;
}

.carousel-img {
    background-position: center center;
}

.car1{
    background-position: center bottom;
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Index</title>
</head>

<body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100 car1" src="http://getwallpapers.com/wallpaper/full/8/8/3/207253.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://getwallpapers.com/wallpaper/full/e/5/2/207303.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://getwallpapers.com/wallpaper/full/9/d/3/207328.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

1 respuesta 1

0

Lo solución que encontré fue la siguiente:

Al elemento que contiene el item, .carousel-inner, le damos una posición relativa.
Además de una altura específicada para el tamaño del carousel.
Al elemento hijo, .carousel-item, se le coloca una posición absoluta,

.carousel-inner {
    height: 200px;
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 50%;
    margin-top: -40vh;
}

https://i.gyazo.com/217a8da37d0d1a59d2044ed3ac77f8e4.gif

2
  • Pasate por el chat y discutimos otra posible solución
    – quevedo
    Commented el 27 nov. 2020 a las 17:42
  • pero taggeame allá XD
    – Excorpion
    Commented el 27 nov. 2020 a las 18:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.