Is there a way to make this Bootstrap 3 carousel half-page? I'm struggling to figure out what adjustments need to be made in order to achieve that. It displays well in a small window, but once I expand it to full screen, the carousel takes over the entire page. How can I ensure that the Bootstrap carousel only takes up half of the page on a full window?
I attempted placing it within a header element, but unfortunately, that did not yield the desired outcome.
<div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
... (carousel code here)
</ol>
</div>A recent update has left the carousel displaying as half-screen, however, when increasing the window size, the images become increasingly zoomed in. Utilizing CSS code provided by another user helped me achieve the half-page display for the carousel, yet the image zooming issue persists with window expansion. How can I prevent the images from zooming in as the window size increases?
.carousel-inner{
height: 50vh;
}
.item img{
height: 100% !important;
width: 100% !important;
}