I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

When adjusting the browser size, the images are resized which is great because it's exactly what I intended. However, the lower part of the black area does not resize accordingly. This results in a black area appearing under the images when viewed on a mobile browser. I would like to solve this issue but I am unsure about how to proceed. Any advice you can offer would be greatly appreciated.

You can find my page here.

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- for IE --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 
    <title>Learning BxSlider</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link href="{% static "bxslider/jquery.bxslider.css" %}" rel="stylesheet">
    <style type="text/css">
        body {
            color: red;
        }
        .container-fluid {
            margin: 0;
            padding: 0;
        }
        .row {
            margin: 0;
            padding: 0;
        }
        article#apple {
            width: 100%;
        }
        div#berry {
            height: 250px;
        }
        img.melon {
            display: block;  /* center */
            margin: auto;
        }
        .bxslider li {
            height: 250px;
        }
        h2.juice {
            position: relative;
            top: -250px;
            z-index: 10;
        }

        .bx-wrapper .bx-viewport {  
            box-shadow: none;
            border: none;
            left: 0;
            right: 0;
            background-color: black;
        }
    </style>
</head>
<body>
    <section class="container-fluid">
        <article id="apple">
            <div class="row" id="berry">
                <ul class="bxslider">
                    <li id="orange" class="">
                        <img class="img-responsive melon" src="http://coolwebwindow.com/jquery-lab/wp-content/demo/bxslider_filter/images/photo01.jpg">
                        <h2 class="juice">Himawari</h2>
                    </li>
                    <li id="lemon" class="">
                        <img class="img-responsive melon" src="http://coolwebwindow.com/jquery-lab/wp-content/demo/bxslider_filter/images/photo04.jpg">
                        <h2 class="juice">Sumire</h2>
                    </li>
                </ul>  
            </div>
            <div>
                <span>BxSlider is difficult in Design</span>
            </div>
        </article>
    </section>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="{% static "bxslider/jquery.bxslider.min.js" %}" type="text/javascript" ></script>
    <script type="text/javascript">
        $(function(){
            $('.bxslider').bxSlider({
                auto: true
            });
        });
    </script>

</body>
</html>

Using: Bootstrap, jQuery, BxSlider

Answer №1

delete the height setting

.bxslider li {
    height: 250px;
}
div#berry {
    height: 250px;
}

make these changes for it to function properly

alternatively, you can utilize the following code in place of your current h2.juice code to eliminate any additional black space

h2.juice {
    position: absolute;
    z-index: 10;
    top: 50%;
    margin: 0;
    left: 20%;
}

remember to refresh your page to see the changes as shown in this image here

Answer №2

Set the height of the image tag to 100%

Answer №3

eliminate the height from every ancestor element

 div#berry {
    /* height: 250px; */
 }

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

Strip the pound symbol from the end of a URL during an AJAX request

When I click on the News tab in my Rails application (version 2.3.4 and Ruby 1.8.7), an Ajax call is triggered to load data. <a href="News" onclick="load_feed();"><u>Show More...</u></a> <script> function load_feed() { $.a ...

Ensure that the view remains consistent while navigating a table that contains expanding concealed information

My table is dynamically populated with data within a div that has overflow: scroll and height set properties. The issue I face is that the data populates from the top, making it difficult to keep track of specific rows when scrolling within the #container ...

How to enhance MVC form validation across multiple tabs by automatically navigating to the tab containing validation errors?

My web page includes a tabstrip that contains multiple tabs, each with several text fields for user input. The tabstrip is enclosed in a form and located just below a submit button. I have implemented model attribute annotations for validation on the text ...

The class 'HttpServerUtility' does not include a function called 'encodeStringJavaScript'

I am currently attempting to refresh a Html.Action using JQuery in my perspective. My approach is based on the solution provided in this Stack Overflow post: How can I code a refresh of a HTML.RenderPartial using Ajax in MVC3? However, upon running the c ...

Tips for showing the chosen value of a ModelChoiceField in Django

Is there a way to display only the selected value from a forms.ModelChoiceField on a view page? I'm struggling to find a clear solution as a Python newbie, despite searching through various forums. Here is the form code snippet: class Manufacturer1F ...

Having an issue with Local Storage returning undefined

I've been working on a form to input values and show the data on a different page after submission. Below is my form: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr ...

The 404 error message was encountered when attempting to fetch the Ajax

I am experimenting with using Ajax to load all images from a local folder onto my HTML page. The code I am referring to comes from this question. I am running the files on a (Tomcat 8.5) server in Eclipse and opening the URL in Google Chrome. However, when ...

`On mouseup event, changing specific text`

I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...

Discovering all jQuery functions employed in a JavaScript file can be accomplished through the utilization of regular expressions

I have a somewhat unconventional idea that I want to share. The project I'm currently working on has an old front-end codebase that is causing the website to run slowly, with jQuery being a major factor. My plan is to develop a tool that can analyze a ...

Converting a PHP string into a JSON array

Currently, I am working on making a cURL request and receiving a response that is in the following format when using var_dump: string(595) "{"user_id":1,"currency":"eur","purchase_packs":{"1":{"amount":500,"allowed_payment_methods":["ideal","paypal","visa ...

Choosing various li classes within a navigation bar

Struggling to pick the right JQuery elements for my portfolio site. The aim is to show/hide the .inner (Task) items by clicking on the .outer (Category) items, complete with rotating .arrows when the menu expands. Check out a similar question, along with ...

How can I create multiple vertical lines in an SVG format?

How can I achieve an effect similar to this https://i.sstatic.net/ulZFR.png? I have attempted using strokeDashoffset and strokeDasharray, but I am still unable to achieve the desired result. I know that I can draw multiple lines, but I need a script that ...

Using Rails to render partials with Ajax and buttons

I have a webpage that showcases a list of microposts along with different tabs like Most Recent, Most Discussed, and Most Viewed. I am looking for a way to dynamically render the various list orders of microposts without having to refresh the entire page u ...

The jQuery function .on('input') does not trigger in IE8 by itself

Encountering a specific issue with IE8. The event isn't firing in IE8, but functions normally in IE9, Firefox, and Chrome. $('#myId').on('input', function () { //perform some action. } If anyone has a workaround for this probl ...

What is the specific function of jQuery Custom events and how do they operate

I've been on the hunt for reliable sources that delve into the inner workings of custom events in jQuery. Specifically, I want to understand how they replicate event bubbling and more. ...

After processing PHP code, display the page to the user immediately

When a user is on index.php: <form align="center" action="send.php" method="post"> address:<input type="text" name="address"/><br> <input id="submit" type="submit" name="submit" value=""> </form> I want to create a f ...

Issue with Bootstrap 4 Dropdown Menu not directing to specified href destination

Project URL: You can download the file by clicking on "Download bootstrap menu file for testing" I have implemented a Bootstrap 4 hover menu that works fine on desktop, but on mobile devices, it converts to a clickable menu. Everything is functional so ...

Utilize jQuery to position a banner using the window.scroll function

I am trying to adjust the position of a banner as I scroll: Here is the code snippet: $(window).scroll(function(){ offset = $(window).scrollTop() + 80; var h = $(window).height(); if(offset < 80 && offset < (h - 800)) { off ...

Insert the current row into the table

I'm working with an HTML table structure that looks like this: <table id="test"> <thead> <tr> <td></td> <td></td> <td></td> <td></td> ...

retrieving information from a Windows Presentation Foundation (WPF) service using

Could someone provide an example of how to fetch data from the following URL which provides JSON data? It works perfectly when tested with the Firefox REST client. I am unsure of how to consume this web service using PHP or jQuery. url: "http://ws.g ...