Expanding image in Bootstrap carousel

Having difficulty with the sizing of my carousel image slider in bootstrap.

Tried adjusting image height using inline css, but images remain stretched.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="col-sm-6">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img style="min-height: 250px;" class="d-block w-100" src="images/hikvision.png" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="min-height: 250px;" class="d-block w-100" src="images/hikvision_2.png" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100 h-25" src="images/hikvision_3.png" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Answer №1

Even without access to the images (as they are stored locally on your device), it is clear that you have implemented a min-height property in your design.

The use of the min-height property sets the minimum height of an element.
If the content is smaller than this minimum height, then the specified value will be applied.
On the other hand, if the content surpasses the minimum height, the min-height property will not have any impact.

Tutorialspoint
Consider utilizing [max-]height for achieving your desired layout.

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

What is the reason that "<a></a>" does not act as the parent element when using jQuery to append it?

I am using jQuery to create elements and add them to existing HTML. Below is the snippet of my jQuery code: var h1 = $(data2).find("h1").html(); var image = $(data2).find(".tutorialContent .wsite-image:first-child").html(); $(".searchResults").append(&apo ...

The CSS arrow breadcrumbs appear slightly fuzzy when viewed in Firefox

My arrow breadcrumbs are appearing a bit fuzzy in Firefox, but they look crisp in Chrome, Opera, and IE. Check out the CODEPEN Here is how it appears in Firefox: https://i.sstatic.net/9iX0g.png This is my HTML: <div class="row"> <div class=" ...

Encountered a deployment issue when trying to deploy an HTML application on Heroku due

After uploading an html application on GitHub, I encountered an error while attempting to deploy it on Heroku: No default language could be detected for this app. HINT: This happens when Heroku is unable to automatically determine the buildpack to use f ...

flip it around - move up

Hey there, check out this snippet of HTML code I have: <style type="text/css"> .container{ width: 450; height: 400; border:1px solid; border-radius: 6px; background: #000; } .name{ border- ...

Utilizing AngularJS to include information into JSON-LD

As a newcomer to AngularJS, I find myself stuck in one of my projects. My goal is to convert the user-entered data in a form into the format: << "schema:data" >> and then push and display it within the @graph of the json-ld. Here are my HTML an ...

Utilizing document.getElementById().value in hidden fields for asp.net web pages does not function correctly

Recently, I developed a basic website using ASP.NET Web Pages with Razor markup. The site includes a form with two hidden fields: latitude and longitude. My goal was to utilize the HTML5 Geolocation API in my JavaScript script to obtain the user's loc ...

How to effectively use jQuery to center images of varying widths horizontally within a div element

Presented below is the div in question: <div id="photos"> <div id="photos_cycle"> <img id="photo" src="{{ asset('bundles/tcheetenweb/images/photos/female_tennis_player.jpg') }}" /> <img id="photo" src="{{ asset(' ...

How can I prevent users from registering with the same username in a PHP/MySql user registration system?

I am currently developing a website and need to ensure that each user has a unique username and password. My web page is already connected to a database, which includes fields for users to input their information such as name, username, password, etc. I r ...

Combining the container class and my custom wrapper in Bootstrap 3: A step-by-step guide

Is there a way to utilize my own fixed size wrapper in conjunction with a responsive container class from Bootstrap without losing the responsiveness? Here is an example of my current code: <div class="container"> <div class="wrapper"> ...

Incorporate a time selector into a Bootstrap 4 input form

Can anyone help me figure out how to incorporate a timepicker into an input field on a Bootstrap 4 admin template? Previously, I had integrated a jQuery timepicker successfully, but after switching to the new Bootstrap 4 admin template, it stopped working ...

Swap out a web link for an embedded iframe

Currently working on updating internal links: <div class="activityinstance"> <a href="http://website.com/hvp/view.php?id=515512">activity</a> </div> The goal is to convert them into: <div class="activityinstance"> ...

The divide grew wider amongst the components

As I was working on a registration form, I noticed a sudden gap between two elements. To see the issue in action, you can check out my code here: http://jsbin.com/mujixepete/2/. Take a look at the gender and date of birth fields to understand what I ...

What is the best way to create vertical separators between CSS grid elements?

I currently have a grid with 3 columns and would like to add two vertical lines to separate the elements. To achieve this, I have placed two span elements between the grid elements using css styling. .vertical_line { position: absolute; height: 100%; ...

Changing the selected value in a dropdown menu when the first dropdown is selected

Currently, I am facing an issue where changing the value of the first dropdown also changes the value of the second dropdown. How can I resolve this issue? I want to ensure that when I change the value of the first dropdown, the second dropdown does not i ...

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

Steps for aligning an image in the center above two divs

I've been attempting to accomplish something without success. The image below should speak a thousand words. My goal is to position div 3, located in div 2, perfectly centered between div 1 and 2 to achieve the desired outcome: Here's my HTML a ...

The backend error message isn't triggering an alert!

My current issue involves using jQuery to execute a .php file. Whenever an error occurs in the backend, I want to display an alert message with the error details. However, when intentionally submitting with an error, no alert pops up and it just proceeds t ...

Rotating through classes with JQuery click event

I'm attempting to create a toggle effect for list items where clicking on an item will change its color to green, then red, and then back to its original state. Some list items may already have either the green or red class applied. However, my curren ...

CSS Code That Is Ineffective

Having some trouble with creating a hidden background that will still show up but not on the main content page. I'm looking to have a different background for the main content itself, but for some reason it's just not working. The main background ...