How can I prevent this image from expanding within the section?

I am currently utilizing Bootstrap 4.6 and WordPress along with the ACF Plugin, and I find myself in need of assistance. I am facing an issue where the height of a row in a section needs to adjust according to the content within a column, but the image within the column is causing the row to expand uncontrollably, resulting in excessive space at the bottom. The challenge is that the content and image within the section are dynamic, meaning that a fixed max height cannot solve the problem.

Image 1: Representing the top of the section

Image 2: Depicting the bottom of the section

Image 3: Showing the additional space at the bottom of the section

Image utilized in the section

    <section id="about">
        <div class="about-section position-relative overflow-hidden" style="background: linear-gradient(180deg, #00AEA0 0%, rgba(0, 131, 120, 0.5) 118.6%);">
            <img class="position-absolute bottom-0 right-0" src="<?php bloginfo('template_directory'); ?>/assets/img/about-us-background.png" style="max-width: 50%;">

            <div class="row">
                <div class="col-12 col-lg-4 px-0">
                    <?php if (get_field('about_image')) : ?>
                        <img class="w-100 h-100 object-cover d-none d-lg-block" src="<?php the_field('about_image');; ?>">
                    <?php endif; ?>
                </div>

                <div class="col-12 col-lg-6 offset-lg-1">
                    <div class="px-4 px-lg-0 py-5 py-md-6">
                        <h1 class="title text-lg-left"><?php the_field('about_title'); ?></h1>

                        <div class="text-md-justify mt-4">
                            <?php the_field('about_text'); ?>
                        </div>

                        <a href="<?php the_field('about_button_link'); ?>" class="btn-custom btn-blue-1 mt-3 px-4 px-md-5"><?php the_field('about_button_text'); ?></a>

                        <div class="row gap-8 gap-lg-4 mt-5">

                            <?php if (have_rows('benefits')) : ?>
                                <?php while (have_rows('benefits')) : the_row(); ?>

                                    <div class="col-12 col-sm">
                                        <div class="d-flex flex-column gap-4">
                                            <div class="hover-flip">
                                                <div class="benefit-icon">
                                                    <?php if (get_sub_field('image')) : ?>
                                                        <img src="<?php the_sub_field('image'); ?>">
                                                    <?php endif ?>
                                                </div>
                                            </div>
                                            <span class="font-weight-bold text-lg"><?php the_sub_field('name'); ?></span>
                                        </div>
                                    </div>

                                <?php endwhile; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

I have attempted using CSS properties such as "

width: 100%; height: 100%; object-fit: cover;
" on the image, but it has not provided the desired outcome.

htmlcssbootstrap-4

Answer №1

I managed to solve the issue by utilizing positioning within the container and image.

    <section id="about">
        <div class="position-relative overflow-hidden" style="background: linear-gradient(180deg, #00AEA0 0%, rgba(0, 131, 120, 0.5) 118.6%);">
            <img class="position-absolute bottom-0 right-0" src="<?php bloginfo('template_directory'); ?>/assets/img/about-us-background.png" style="max-width: 50%;">

            <div class="row no-gutters">
                <div class="col-12 col-lg-4">
                    <div class="h-100-img-container">
                        <?php if (get_field('about_image')) : ?>
                            <img class="w-100 h-100 object-cover d-none d-lg-block" src="<?php the_field('about_image'); ?>">
                        <?php endif; ?>
                    </div>
                </div>

                <div class="col-12 col-lg-6 offset-lg-1">
                    <div class="px-4 px-lg-0 py-5 py-md-6">
                        <h1 class="title text-lg-left"><?php the_field('about_title'); ?></h1>

                        <div class="text-md-justify mt-4">
                            <?php the_field('about_text'); ?>
                        </div>

                        <a href="<?php the_field('about_button_link'); ?>" class="btn-custom btn-blue-1 mt-3 px-4 px-md-5"><?php the_field('about_button_text'); ?></a>

                        <div class="row gap-8 gap-lg-4 mt-5">

                            <?php if (have_rows('benefits')) : ?>
                                <?php while (have_rows('benefits')) : the_row(); ?>

                                    <div class="col-12 col-sm">
                                        <div class="d-flex flex-column gap-4">
                                            <div class="hover-flip">
                                                <div class="benefit-icon">
                                                    <?php if (get_sub_field('image')) : ?>
                                                        <img src="<?php the_sub_field('image'); ?>">
                                                    <?php endif ?>
                                                </div>
                                            </div>
                                            <span class="font-weight-bold text-lg"><?php the_sub_field('name'); ?></span>
                                        </div>
                                    </div>

                                <?php endwhile; ?>
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Here is the CSS that was used:

    .h-100-img-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .h-100-img-container img {
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

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

Show data in a popup using jQuery DataTables and loading content asynchronously via Ajax

I am attempting to display a list in a popup based on an Ajax request. Prior to the Ajax call, the list is contained within the popup. However, after the Ajax request, the list remains on the page instead of inside the popup, and the old list still appears ...

javascriptjqueryhtmlajaxdatatables

Unable to concentrate on HTML input elements

TL;DR just click on this link I'm having a problem with my input elements - they seem to be on strike and not working properly. I've simplified the code to focus on the variables, and while I found some solutions that work, I believe there' ...

htmlcssinput

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

htmlcssangularanimationfloating-action-button

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

javascripthtml

Retrieve the selected option from the dropdown menu in the specified form

What should I do if I have numerous products and want users to be able to add new dropdown boxes dynamically? When the submit button is clicked, only the value of "category[]" within the form should be retrieved. https://i.stack.imgur.com/v1fnd.png Below ...

javascriptphpjqueryhtmllaravel

When attempting to click on the dropdown in Bootstrap, there is no content displayed

I am currently practicing Bootstrap and focusing on implementing Dropdowns. However, I am facing an issue where upon clicking the Dropdown button, nothing appears on the screen. Preview when it's not clicked Preview when it's clicked Here is m ...

javascripthtmlcssbootstrap-5

Inserting a cell into a duplicated table while keeping the original table intact

I am looking to insert a new TD into a cloned table so that it exists only in the cloned version and not in the original one. This way, users won't accidentally remove the original table leaving nothing to be cloned :) Currently represented as follow ...

jqueryhtml

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving. Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem: In ...

javascriptjqueryhtmlcsstooltip

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Tips for using jQuery to identify the most recently modified row in an HTML table

Is there a way to identify the most recently modified (either newly added or changed) row in an HTML table? ...

javascriptjqueryhtml

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

javascripthtmljsonapi

Move the div with jQuery

I am currently working on making a div draggable without relying on jQuery UI. Here is the HTML code: <div class="wrapper"> <div class="toddler"></div> </div> And here is the script I have written: $.fn.slider = function () { ...

jqueryhtmlcss

Troubleshooting MySQL Database Insertion Errors caused by Dynamic Forms

<body> <?php $con = mysqli_connect('localhost','root','','cash'); $query = "SELECT DISTINCT category FROM cash"; $result = mysqli_query($con,$query); $dropDownList = &apo ...

javascriptphphtmlmysql

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

jquerycsscordova

Retrieve data from a table with XPath expressions

Looking to gather details from this specific website link: Focusing on extracting the number of bedrooms from a table. <div class="panel panel-primary"> <div class="panel-heading">Property Details</div> <div class="panel- ...

htmlparsingxpathweb-scrapingweb-crawler

Arrange a series by the actual pixel width of the string

Imagine you have an array of tags represented as strings and you need to display them in a narrow view. Some tags are smaller, allowing for 2 to fit on one line, while larger tags require their own line. Your goal is to sort the array so that the smalles ...

javascripthtmlcssreactjsfonts

What is the best way to retrieve the parent element quickly using Jquery?

html: <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input class="spinner1 ui-spinner-input" id="q1" name="value" value="1" min="1" aria-valuemin="1" aria-valuenow="2" autocomplete="off" role="spinbutton"><a class="ui ...

jqueryhtml

Is there a way to create a smooth opacity animation for a background image?

https://i.sstatic.net/PuxYm.jpg I am attempting to create a simple animation on my header using pink red lines that I want to make disappear and reappear on a keyframe. However, when I apply my styles, the entire container is animated instead of just the ...

htmlcssbootstrap-4

Transferring data between Javascript and PHP with AJAX and JQuery

I'm currently working on a basic web page that involves sending data from an HTML page to a PHP script and receiving some data back. My approach involves using AJAX, but for some reason, the PHP script doesn't seem to execute at all. Here's ...

javascriptphpjqueryhtmlajax