Is there a way to set the carousel dimensions to a 4:3 ratio with bootstrap 4.4?

Utilizing twitter-bootstrap 4.4, I am attempting to create a carousel with thumbnails. My goal is to fit the image into a fixed 4:3 ratio container for a consistent look, regardless of the image's orientation.

Is there a way to ensure that the carousel-inner container always displays in a 4:3 ratio? You can view the complete code in this jsFiddle link

Below is a simplified version of the code:

<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <!--Image 1-->
    <figure class="carousel-item active">
      <picture class="d-block w-100">
        <img class="w-100" style="object-fit:cover;" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" alt="First slide">
      </picture>
      <figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
    </figure>
    <!--/.Image 1-->
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
  <!--Thumbnails-->
  <ol class="carousel-indicators">
    <!--Thumbnail 1-->
    <li data-target="#carousel-thumb" data-slide-to="0" class="active">
      <picture>
        <img class="d-block w-100" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-thumbnail">
      </picture>
    </li>
    <!--/.Thumbnail 1-->       
  </ol>
  <!--/.Thumbnails-->
</div>
<!--/.Carousel Wrapper-->
csstwitter-bootstrapbootstrap-4carousel

Answer №1

Based on your query, it seems that there is a slight ambiguity in defining the problem. However, I have attempted to provide a solution below for your consideration:

I noticed that your code contains the .w-100 class applied everywhere, although the reason for this is unclear. I recommend removing this class from all elements and utilizing CSS for styling instead. For images specifically, you can apply width: 100%; using CSS.

Below are the CSS styles that I have added to your existing code:

ol li img.w-100 {
  height: 100%;
  width: 6vw !important;
}

figure picture img.w-100 {
    width: 100%;
    height: 25rem;
}

The use of !important in the styles is necessary to override any conflicting styles applied by the w-100 class.

You can view the updated code in action at this link.

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

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs

Tips for seamlessly combining Bootstrap with Vue.js

Is there a solution for the error message that keeps showing up? https://i.sstatic.net/t2fOe.png ...

vue.jsbootstrap-4

Challenges encountered when working with Bootstrap 4 Modals and Angular 8

I've encountered a problem with Bootstrap 4.3.1 Modals and Angular 8. Despite researching similar cases, none of the suggested solutions have worked for me. Here's what I've tried: I directly copied and pasted the code from Bootstrap' ...

angularbootstrap-4bootstrap-modal

Bootstrap 4 is having issues with HTML Popover functionality

When attempting to create a bootstrap popover with an HTML string named boomHTML, I encountered an issue where the code only functions correctly in bootstrap 3. In bootstrap 4, the popover appears empty unless the HTML tags used are <h1></h1>. ...

javascriptjquerytwitter-bootstrapbootstrap-4popover

Using the Flex display property automatically adjusts the height of a button based on its

I have a main container, and within it, an <h1> heading and a <button>. I align them using justify content-between. Since the main container has a d-flex class, the button ends up having the same height as the main container. Is there a way to ...

htmlcssbootstrap-4flexbox

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

javascripthtmlcssreactjs

list of current items on the sidebar that are currently being

Hey everyone, I could use some assistance with customizing my sidebar design. I am trying to implement an active state in my sidebar using JavaScript. I attempted to utilize the element.css() method to apply styles when an element is clicked. However, I no ...

javascriptjquerycss

javascript: obtain the height of the pseudo :before element

Can someone help me figure out how to get the height of a pseudo :before element? I've tried using jQuery but it's not working as expected. Here's what I attempted: $('.test:before').height() // --> null If you want to take a ...

javascripthtmlcss

Having trouble getting the AJAX script to change the background in Internet Explorer?

I'm currently experiencing an issue with an ajax script. Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#savecolor').click(function(){ var myVar = 'data= ...

javascriptjquerycssajax

I'm baffled by this unsemantic grid - why is the final div getting pushed below the rest?

I am working with the unsemantic fluid grid system and aiming to create a row of divs that are all in line and together cover 100% of the page. <div class="grid-container"> <div class="grid-parent yy name-strip zz"> <div class="yello ...

htmlcssfluid-layout

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

javascriptcssvue.jsvuejs2vuetify.js

Avoiding divs from crashing into each other

I've developed a game feature that allows users to chat. Each message is displayed as an absolute positioned element in the body with user x position set as the "left" CSS property. These messages are animated to move to the top of the screen. I want ...

javascriptjqueryhtmlcss

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

The presence of a Bootstrap modal is causing other elements on the HTML page to

I recently implemented a bootstrap model on my website and it seems to be working perfectly fine. However, I encountered an issue where the modal blocks access to the text box, making it impossible to edit the content. Is there a way to make the textbox ed ...

htmltwitter-bootstrap

The slider feature on Google Reviews is currently not functioning properly with the owl carousel

I am facing an issue with integrating Google Reviews slider using Google API and owl carousel. The problem lies in the fact that the Google reviews data is appended last after the page has loaded completely. This causes the owl carousel function to be call ...

phpjquerycssgoogle-maps-api-3owl-carousel

The design became distorted when the fonts were resized in every browser

Looking for assistance with a simple layout issue. When I scale the font in browsers by using CTRL and scrolling up (zooming), the layout does not behave as expected. I want #allWrapper to scale its dimensions with the body so that the white background ex ...

csslayoutscalingfont-size

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

htmlcssbootstrap-4

In Firefox version 3.6, sIFR 3 is displaying text in a random arrangement along a single line

For some reason, sIFR 3 is behaving oddly in Firefox. In other browsers like IE, Chrome, and Safari, the Flash element within a 412px wide box remains consistent at that width. However, in Firefox, it initially stretches to the width of the Body element b ...

javascriptcssfirefoxsifrwidth

What is the best way to position a website in the center in the provided example?

Simple question here, couldn't find it in the search so sorry if it's a repeat. How is the content on this responsive website centered? I've checked the body margins but can't seem to locate anything. Thank you for your help. ...

csshtmlresponsive-design

The HTML document is experiencing overflow within the body element

I am in the process of designing a website that consists of two main sections. The first section includes a video, a navigation bar, and some introductory text. The second section features an image and a lorem ipsum paragraph. However, these two parts are ...

htmlcssvideo