Dimensions of images in Bootstrap carousel

Hey there! I'm having an issue with the responsiveness of a carousel on my website. The problem is that I have 7 horizontal images (1800x1200) in the carousel, but the last one is vertical and I can't seem to code it properly to make it responsive:

Check out the carousel here

Here's the code for the carousel:

            <div class="row">
                <div class="col-md-1 hidden-xs"></div>
                <div class="col-md-10 col-xs-12 col-sm-12">
                
                <div id="carouselExampleControls" class="carousel slide carousel-fade" data-ride="carousel" data-interval="10000">
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img src="img/refugio/01.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/02.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/03.jpg" class="d-block w-100" alt="...">
                    </div>                    
                    <div class="carousel-item">
                      <img src="img/refugio/04.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/05.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/06.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                      <img src="img/refugio/07.jpg" class="d-block w-100" alt="...">
                    </div>
<div class="carousel-item" align="center">
                      <img src="img/refugio/08.jpg" class="d-block img-fluid" alt="...">
                    </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>

                    <p>Proyecto abierto</p>
                    <p align="right">Asturias · 2017/18</p>
                </div>

                 <div class="col-md-1 hidden-xs"></div>

        </div

I've tried replacing class="d-block w-100" with class="d-block img-fluid", but it's not working as expected.

Any help or suggestions would be greatly appreciated :-)

Thanks so much, Luis

htmlcssbootstrap-4carousel

Answer №1

.carousel-fade .carousel-item, .carousel-item img  {
  max-height: 90vh;
}

This solution addresses the issue by defining a maximum height of 90% of the viewport for any element with the class .carousel-item, achieving the desired effect.

Of course, feel free to adjust the value as needed for your specific project (perhaps 85vh would work better?).

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

Is there a way to submit the value of a textbox that has been generated dynamically using jQuery?

I am currently using the CodeIgniter framework and am attempting to incorporate textboxes in an HTML form. When the user clicks a button, a new textbox should be generated automatically using jQuery. However, when I submit the form, the values of the dynam ...

phpjavascriptjqueryhtmlcodeigniter

Calculating the median in JavaScript utilizing a for loop

Currently, I am in the process of learning JavaScript. My goal is to calculate the median of a set of numbers that I input through a prompt when I click the button labeled "find median". function CalculateMedia() { var n = prompt("Enter the number of e ...

javascripthtml

Adjust the section and aside elements to automatically expand when used within the main tag

Is there a way to ensure that the inner-section and sidebar have a minimum height, while also expanding vertically along with the main tag? Here is an example of the HTML code: <body> <header></header> <main> <s ...

htmlcss

Arranging a variety of sophisticated charts side by side using Bokeh

Is there a way to display two or more Bar charts together in a single html file using Bokeh? I have found examples of laying out figures like triangle, square from bokeh.plotting together on this page: However, I have not been able to find any examples s ...

pythonhtmlplotbokeh

Problems Arising with HTML Form Functionality

After creating an HTML form, I encountered an issue where upon submission, it prompts me to open G Mail or Outlook in order to send the email. Although the correct email address is populated, I wish for the email to be sent without having to open any ext ...

phphtmlformssendmail

Navigate to the homepage section using a smooth jQuery animation

I am looking to implement a scrolling feature on the homepage section using jquery. The challenge is that I want the scrolling to work regardless of the page I am currently on. Here is the HTML code snippet: <ul> <li class="nav-item active"> ...

javascriptjqueryhtmlcss

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

javascripthtml

Blending an HTML jQuery toggle

Is there a way to make the current headline fade out while simultaneously fading in a new one when switching to the next div using a jQuery .html switch? Check out the codepen example: https://codepen.io/balke/pen/JpNNve $(window).scroll(function() { ...

javascriptjqueryhtmlcss

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

Avoiding the use of angle brackets in XSLT语

Looking to replace a sequence containing '.\s+\w+' with a line break This is what I currently have: <xsl:value-of select="replace($fdesc,'[.][ ]+\w+','<br/>')" /> However, I am encountering an er ...

htmlescapingxslt-2.0

What is the best way to implement CSS modifications in a specific sequence?

There are times when I need to apply multiple CSS changes in a row, ensuring that each one is properly rendered. Check out this simple example The height of the element is set to auto, so transitioning is not possible. To work around this, I want to firs ...

javascriptcsscss-transitions

Expanding scrollbar when hovered over

My goal for a landing page design is to showcase a centered logo at the top, followed by three images with borders arranged side by side, each with a bit of padding. When a user hovers over any of these images, I want the text on that image to slide to the ...

cssbootstrap-5

Rendering Local HTML with local styling and scripts in React Native Webview

I am having trouble loading a local HTML, CSS, and JS file in my React Native webview. The CSS is not being applied to the HTML. Here is my folder structure: https://i.sstatic.net/mqYT9.png My HTML file, along with CSS, images, and JS file are all placed ...

javascripthtmlcssreact-nativewebview

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

Using jQuery to update a table, however, the browser is failing to automatically refresh the

I have developed a node.js and sockets app to create a Single Page Application (SPA). The user can fill out a form to create a new lobby. Upon submission, a socket event is sent to the server, where the new lobby is added. The server then emits an event to ...

javascripthtmlnode.jssocket.io

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

csssvgmask

Using CSS to set the display property to table-cell and converting it to a

I needed a SideMenu that would match the length of the content, but for some reason, using display:table-cell caused it to display:block in both Firefox and Chrome. What could be the reason behind this inconsistency? .back-branded { background: #900; ...

htmlcss

Function for editing a button in an AngularJS single page application

I am a beginner in AngularJS and I'm currently working on a project to create a single page application for tracking expenses. However, I'm facing some challenges with my code. Although I have successfully implemented most of the functions, I am ...

javascripthtmlangularjs

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

javascripthtmlember.jsmodel

Creating a dynamic 3x3 layout using flexbox: a step-by-step guide

Is it possible to dynamically create a layout in Next.js with 3 columns of 3 rows using flexbox, React Bootstrap, or CSS only? https://i.sstatic.net/tTinS.jpg ...

cssreactjslayoutflexboxnext.js