Having trouble adjusting the image to fit properly in the carousel

I'm struggling to make the image fit properly within the carousel. Below is the CSS code I've been working with:

   <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" src="images/Products/keyboard.jpg" alt="First slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Welcome to LebShops</h5>
          <p style="color:black">Proud to be Lebanese</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/Products/mouse.jpg" alt="Second slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Enjoy our vast selection of products</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/Products/airpods.jpg" alt="Third slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Whatever you need we got it !</h5>
          <p style="color:black">Cash on delivery</p>
        </div>
      </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>

Any tips on how to adjust the image size inside this carousel? I've attempted using CSS to tweak the height, and have also browsed through similar questions but haven't found a solution that works for me.

htmlcssbootstrap-4

Answer №1

Check out this snippet below where I have incorporated various image sizes in the gallery.

The only modification required is adding some css

img{
    object-fit: cover;
    vertical-align: middle;
    border-style: none;
    height: 70vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<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" src="https://picsum.photos/id/100/200/250" alt="First slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Discover LebShops</h5>
          <p style="color:black">Embrace Lebanese pride</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://picsum.photos/id/100/500/300" alt="Second slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Explore our extensive product range</h5>
          <p style="color:black">Easy cash on delivery</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://picsum.photos/id/100/300/350" alt="Third slide">
        <div class="carousel-caption d-md-block">
          <h5 style="color:black">Got a need? We've got you covered!</h5>
          <p style="color:black">Convenient cash on delivery</p>
        </div>
      </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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Decoding JSON in AngularJS

Looking for assistance in parsing a JSON 2D array with Angular JS and fetching images from the array. Can anyone provide some guidance on this? I have updated my Plunker at this link HTML Code <!DOCTYPE html> <html lang="en" ng-app="myAp ...

javascripthtmlangularjs

Bootstrap - the ability to resize elements dynamically

I'm currently working on a layout using Bootstrap and I could use some guidance to achieve the desired outcome. Essentially, what I am trying to accomplish is having resizable elements on the screen. When there's only one element, it should take ...

htmlcssbootstrap-4

What could be causing the unequal sizes of my flex children?

After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size. In the code provided, the parent element has a fixed height and width, while the children a ...

cssreactjstailwind-css

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Currently encountering an issue while trying to implement modal windows on my first website. Everything works fine without the for loop, but I wanted to have multiple buttons and windows, so I decided to use a for loop to handle each button. Strangely, the ...

javascripthtml

Locate the unique identifier for the initial product with a special badge on an online retail platform through the use of Selenium

To complete the task of finding the top-selling women's socks on Amazon, I attempted to locate the item labeled as a "Best Seller" after searching for "Socks for women" on the website. However, I am struggling with the logic to identify and click on t ...

javahtmlcssseleniumselenium-webdriver

What could be causing the dysfunction of the jQuery class adding function?

I'm new to using jQuery and I'm trying to add a class to the 'a' tag when the 'li' tag is clicked. However, it doesn't seem to be working as expected. $('.nav-item').click( function() { $(".nav-item a").re ...

javascripthtmljquery

Switch up the box-shadow color with ColorThief!

Is there a way to adjust this script to change the box-shadow color of #player1? <script type="text/javascript> $(window).ready(function(){ var sourceImage = document.getElementById("art"); var colorThief = new ColorThief(); var color = ...

javascriptcss

Changing the Position of HTML Scripts in React

I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...

javascripthtmlcssreactjs

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on im ...

javascriptjqueryhtmlcssclick

How can I access a component variable within the styles in Angular?

Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...

cssangular

.NET Reporting and Report Design Tool for Enhanced Data Visualization

I have various locations equipped with sensors that monitor air quality parameters such as CO2, CO, O3, PM10, and more. This data is collected every five minutes. Currently, I am in need of a tool where users can select a specific station from either a ma ...

html.netreporting

What is the best way to incorporate sub HTML projects into a Django project?

Currently, I am working on a Django project as well as some small HTML projects, including a few HTML5 games. How can I integrate the HTML site into my existing Django project? Each HTML project has its own folder containing numerous CSS, image, and JavaS ...

pythonhtmldjango

Using different time intervals, setTimeout can be implemented within a for loop

I have an array consisting of different objects, each containing a time property with various values. My goal is to iterate through this array and use a setTimeout function inside to print out the name of each object after a specific amount of time based ...

javascripthtmlsettimeout

The grid collapses whenever I add any margin or padding

My current setup involves using the bootstrap-grid system alongside Material UI, which has been working well overall. However, I am facing a specific issue where the grid system does not maintain its slot space after applying padding or margin. This caus ...

cssreactjsmaterial-uibootstrap-grid

What could be causing the background color not to change on the HTML page with Bootstrap?

Learning html, bootstrap, and css styling can be a confusing endeavor. Sometimes things don't work as expected, like changing the background color. Despite following what seems like a simple solution after googling, the background color remains unchan ...

javascripthtmlcssbootstrap-4

Choosing both large font and low vision CSS stylesheets concurrently

I'm currently working on designing one of my initial websites and have encountered a dilemma. I have three different stylesheets - one for low vision, one for large font, and the default one. I have three buttons to select these stylesheets, but I&apo ...

javascriptjqueryhtmlcssweb

Ways to display a div based on the value quantity

Is it possible to display a div based on the value provided? Check out my code on Fiddle! jQuery(function () { jQuery('#btn_test').click(function () { $(this).parent().children('#test_inner').slideToggle('500' ...

jqueryhtmlcss

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Here's a simple concept: when you navigate to the same webpage, a different file should be uploaded based on whether you click on <a> elements labeled as tracks or sets. However, my code seems to be malfunctioning. Any ideas? Below is the HTML ...

jqueryhtmlajax