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>