"Utilizing the owl carousel to dynamically adjust the height of various images and fill

Currently, I am using the latest version of the owl carousel and encountering a small issue. The problem lies in the fact that I have 3 images with varying sizes.

The main div, labeled as "mydiv," is required to have a width of 614px. However, upon closer inspection of the images, you will notice a discrepancy in height - the first image has more width, the second has more height, and the last one is slightly smaller, causing excessive space between the images and the bottom of the page.

I am seeking guidance on how to rectify this issue or fill the empty space appropriately.

$(document).ready(() => {


    var owl = $('.mydiv').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        autoplayHoverPause: true,
        mouseDrag: false,
    });
    


})
body { background-color: green; }

.owl-prev, .owl-next {
  font-size: 65px !important;
}

.owl-carousel .owl-item img {
  width: 614px !important;
  object-fit: cover;
}

.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

    <body>
        <div class="mydiv owl-carousel">
            <img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
        </div>
        

        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc9d3c8d3ce">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        
        <!-- OWL CAROUSEL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    </body>
</html>

htmlcss

Answer №1

To make the owl-stage display as flex and then target images for 100% height, you can use the following CSS:

.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item img {
    width: auto;
    height: 100%;
}


$(document).ready(() => {


    var carousel = $('.mydiv').owlCarousel({
        items: 1,
        dots: true,
        nav: true,
        loop: false,
        autoplay: false,
        autoplayHoverPause: true,
        mouseDrag: false,
    });
    


})
body { background-color: green; }

.owl-prev, .owl-next {
  font-size: 65px !important;
}
.owl-carousel .owl-stage {
  display: flex;
}
.owl-carousel .owl-item img {
  width: 614px !important;
  object-fit: cover;
  height: 100%;
}

.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

    <body>
        <div class="mydiv owl-carousel">
            <img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
                            <img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
        </div>
        

        <!-- JQUERY -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b1617494e494f5c4d62490269026f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
        
        <!-- OWL CAROUSEL -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
    </body>
</html>

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

Modify the hover color of the FontAwesome span icon

Here's a span that I have: <span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span> I decided to change the color to #008d4c like this: .fa-green { color: #008d4c; } But when I try to hover over it, the color do ...

cssfont-awesome

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - How can I achieve this effect on ion-card? Here is my HTML code - <ion-grid> ...

cssangularionic-frameworkionic3

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

Inject the HTML code into a bash script and perform operations on it

Could someone help me with a bash scripting question? I'm new to this, so I may have missed it if it's already been answered. I want to pass the html source code of a web page to my script, which will then modify or scrape the web page of its HT ...

htmlbashstdin

Executing a Python script within an HTML page using Django and extracting a variable from an input form

I have created a sentiment analysis Python script, but now I want to integrate it with an HTML page. The goal is to take input from the HTML form, process it using the Python script, and then display the results back on the HTML page. Currently, I am usin ...

pythonhtmldjango

The animation in Material UI does not smoothly transition with the webkit scrollbar

I've been experimenting with CSS animations in Material UI's sx property to achieve a webkit scrollbar that eases in and out. However, instead of the desired effect, the scrollbar appears and disappears instantly. Whether I define the keyframes ...

javascriptcssreactjsmaterial-uifrontend

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

javascriptjqueryhtmlcssdom

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

Submitting data using various submit buttons in PHP

I am facing an issue with multiple submit buttons in my form, each containing hidden values that are dynamically generated. The problem arises when I can see the correct values in the HTML source code, but upon submitting one button, all other values get s ...

phphtmlarraysformspost

Overriding Styles Set by an External CSS file

Let's assume that I have two different style sheets set up on my webpage: site.css: .modal { position: absolute; width: 200px; ... } ... reset.css: .reset * { position: static; width: auto; ... } Unfortunately, I don ...

javascriptjquerycss

Adding alternative content when embedding an SWF file in HTML5 - What's the best way to do it?

I am looking to incorporate an SWF file into HTML5. Currently, I have successfully used this code: <embed src="main.swf" width="550" height="400" /> However, I am wondering how I can display alternative content (such as an animated GIF image, or a ...

htmlflash

Troubleshooting inconsistent htaccess changes across different pages?

After much trial and error, I have successfully managed to run PHP code within a document that has either an .htm or .html extension. The solution that worked for me was adding the following line of code: AddType application/x-httpd-php .php .html .htm N ...

phphtmlapache.htaccessxampp

How to Access a div from another website using jQuery

I have a question. How can I call a div from another website using JavaScript? Here is the page: Now, I want to call the <div id="testa"> in another page. The other page is called Otherpage.html: jQuery(function($){ $(&ap ...

javascriptjqueryhtml

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Attempting to simplify tables in Angular, I am working on a directive. My goal is for the user to only need to provide the list object and the formatting of each list element in the HTML, using the my-table tag as shown below... <h3>My Table</h3& ...

javascriptjqueryhtmlangularjs

Tips for adjusting the positioning of a div element in a responsive design

I am currently working on my website and facing a layout issue. In desktop mode, there is a sidebar, but in mobile view, the sidebar goes down under the content displayed on the left side. I would like the sidebar to appear at the top in mobile view, fol ...

javascriptjqueryhtmlcss

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

What is the process for obtaining an HTML form, running it through a Python script, and then showcasing it on the screen

I am inquiring about the functionality of html and py script. .... The user enters 3 values for trapezoidal data from the html form: height, length of side 1, and length of side 2, then clicks submit. The entered values are then sent to be calculated using ...

pythonhtmlpython-3.xtypescript

Using CSS to add color to the border of a shape

Is there a way to make only the top, shaped part of this polygon have a 2px blue outline? .graph { clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%); border:none; height:200px; width:100%; ...

htmlcss

Using ng-options with the Add New feature is not compatible with the select statement

Hello everyone, I have some JSON values that look like this: [{"Employee":{"Emp_id":"EF00001","First_name":"Aruna","Last_name":"Jayalath"}}] Unfortunately, I am having trouble retrieving the values within the select statement when running this function i ...

javascripthtmlangularjs