Я использую карусель Bootstrap 4 для своего веб-сайта. Все работает, но теперь я ищу решение для выравнивания изображения слайдера по центру карусели.
В настоящее время он выровнен по левой стороне, поэтому, когда я изменяю размер браузера, изображение ползунка будет обрезано с правой стороны. Я бы хотел, чтобы изображение было в центре, чтобы изображение было обрезано с обеих сторон.
/* SLIDER
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 30rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 40rem;
margin: 0 auto;
}
<!-- Slider -->
<div id = "Slider" class = "carousel slide" data-ride = "carousel">
<ol class = "carousel-indicators">
<li data-target = "#Slider" data-slide-to = "0" class = "active"></li>
<li data-target = "#Slider" data-slide-to = "1"></li>
<li data-target = "#Slider" data-slide-to = "2"></li>
</ol>
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "first-slide" src = "img1.jpg" alt = "First slide">
<div class = "container">
<div class = "carousel-caption text-left">
<h1>Platzhalter 1</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class = "btn btn-lg btn-outline-warning" href = "#" role = "button">Jetzt buchen</a></p>
</div>
</div>
</div>
<div class = "carousel-item">
<img class = "second-slide" src = "img2.jpg" alt = "Second slide">
<div class = "container">
<div class = "carousel-caption">
<h1>Platzhalter 2</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class = "btn btn-lg btn-warning" href = "#" role = "button">Learn more</a></p>
</div>
</div>
</div>
<div class = "carousel-item">
<img class = "third-slide" src = "img3.jpg" alt = "Third slide">
<div class = "container">
<div class = "carousel-caption text-right">
<h1>Platzhalter 3</h1>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class = "btn btn-lg btn-outline-warning" href = "#" role = "button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class = "carousel-control-prev" href = "#Slider" role = "button" data-slide = "prev">
<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
<span class = "sr-only">Zurück</span>
</a>
<a class = "carousel-control-next" href = "#Slider" role = "button" data-slide = "next">
<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
<span class = "sr-only">Vor</span>
</a>
</div>
Опубликуйте рабочий сниппет с актуальными размерами изображений
Попробуйте добавить эти правила css
.carousel-item > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
height: 40rem;
margin: 0 auto;
}
Но для получения дополнительной помощи нам нужна информация о том, что вы пробовали, и рабочий фрагмент, как указано в комментариях под вашим вопросом.
Привет, Фабиан, твои правила css у меня сработали. Спасибо за быструю помощь :-)
что вы еще пытались центрировать изображение?