Adjusting the dimensions of the carousel slide

Below is the code I'm currently working on to generate a carousel:

<section id="slider">
    <div id="landing-page-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active carsi">
          <img class="landing-pg-image" src="image/1.png" alt="profile">
        </div>
        <div class="carousel-item carsi">
          <img class="landing-pg-image" src="image/2.png" alt="profile">
        </div>
        <div class="carousel-item carsi">
          <img class="landing-pg-image" src="image/3.png" alt="profile">
        </div>
        <a class="carousel-control-prev" href="#landing-page-carousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#landing-page-carousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
    </div>
  </section>

I am trying to make the carousel take up only 70% of the screen with the following CSS rule:

.carsi{
  width: 100%;
  height: 70%;
}

Unfortunately, applying this rule does not seem to affect the carousel item. Can someone help me figure out what I might be missing?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you give it a shot, this method allows you to adjust the image height in sync with the carousel item.

.carousel .item {
  width:100%;
  height: 70%;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 70%;
    object-fit: cover;
}

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

A guide to adding images to dropdown options in Angular 6

I'm having trouble getting an icon or image to appear next to text in a dropdown menu. I'm currently working with Angular 6 and despite trying multiple solutions, I haven't been able to make it work. All I want is to display a flag next to ...

htmlangularbootstrap-4angular6

Whenever I incorporate a media query in my CSS, I find that I am losing some of the stylings

Recently, I've started using media queries in my application to ensure that the webpages are responsive. It's a new concept for me and I'm still learning how to properly implement it. Below is an example of how I am incorporating media quer ...

cssresponsive-design

Is there a way to showcase Laravel images on a live server efficiently?

After successfully developing a Laravel app on my local machine, complete with visible images, I encountered an issue upon deployment to the live server where the images were no longer displaying. My hosting setup involves a 'public_html' folder ...

phphtmllaravel

Access a different tab through the utilization of JavaScript functions

Hi everyone, I recently created tabs using bootstrap, but I am facing a challenge with a specific scenario. I need the active tab to switch to another tab when a submit button is clicked. <div id="checkout-progress"> <ul class="nav nav-tabs"& ...

javascriptjquerytwitter-bootstrap

Tips for positioning buttons in a row below dynamic text using Bootstrap 3

Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally. Current Behavior: https://i.sstatic.net/lEQ7o.png My goal is to have t ...

javascripthtmlcsstwitter-bootstrap-3bootstrap-4

Is there a way to enable a clickable imagemap area using jQuery?

Example showcasing different behaviors in various browsers (jsfiddle link): <!DOCTYPE html> <html> <head> <title>Browser Behavior Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

jqueryhtmlcssimagemap

Show loading message on keypress using jQuery

I need assistance with a unique jQuery script for the desired functionality: While inputting text into the text field, I would like the adjacent 'Load' text to be displayed. If typing stops, the 'Load' text should change to 'Del& ...

phpjqueryhtml

Retrieve the value of another ID within a form using the .innerHTML property

I would like to be able to show the value of a text field when the Search button is clicked. Currently, I have the following code on the search button: onclick="document.getElementByid('output').innerHTML = this.value" This code successfully r ...

javascriptjqueryhtml

Standalone JSON Hyperlinks within a Table Column

My webpage features a table filled with information from a JSON API. Currently, I am struggling to create unique links in the far right column of the table. The issue is that all rows are linking to the same HTML page (12345), which is not ideal. What I w ...

javascriptjqueryhtmljson

Step-by-step guide on positioning a div below another div and centering both elements horizontally

Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center." The goal is to center the main "border" div in the middle of the screen and align the other elements inside it. ...

htmlcss

I am facing an issue where the display property of inline-block is taking precedence over

I am facing a challenge in placing 2 containers side by side. These containers have a thick white border and are initially hidden until a click event reveals them. The containers are given a class of "hidden". However, in order to align the div containers ...

htmlcss

The border is not properly containing the element within

I've been struggling to create a menu with no luck. My goal is to add a border to all my li elements, but the border consistently appears only at the bottom. Is there a way to make the border wrap around the entire li element? Check out my code here: ...

htmlcss

How to float two divs using flex in Bootstrap 4

I'm having trouble floating two divs within a row or container div. Despite using the classes .justify-content-md-start and .justify-content-md-end, the divs remain next to each other without any float. I've also tried using classes like float-l ...

htmlcsstwitter-bootstrapbootstrap-4

Parsing HTML with a simple DOM parser

I am utilizing the simple php dom parser in my project. Within my loaded dom, there is a link that appears like this in html: <a href="...">Some const tesxt</a> I am wondering how I can utilize the find function to select this particular obje ...

phphtmldom

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

Embed Socket.IO into the head tag of the HTML document

After working with socket.IO and starting off with a chat example, my chat service has become quite complex. The foundation of my code is from the original tutorial where they included <script src="/socket.io/socket.io.js"></script> <scrip ...

javascripthtmlnode.jssocket.io

How can I center align text after floating ul li elements to the left?

When creating a navigation bar with li elements floated left, the text also floats left. How can I center the text in the navigation bar? I have tried using text-align:center;, but it doesn't center the text on the y-axis. Some suggest using padding t ...

htmlcss

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon

Using HTML Dropdowns to Dynamically Generate Options for Lists

I am currently updating a web application that is built using C# with an HTML front-end. The form within the application has two drop-down selection menus. The first drop-down menu needs to call a C# function in order to populate its options with the retu ...

c#htmldrop-down-menu