Image in Bootstrap is not resizing its height based on the height of the parent

I am facing an issue with resizing images inside buttons. Despite using the Bootstrap-4 class ("img-fluid"), the images are not adjusting properly when the button height or text size is altered. The image height remains unchanged. Here is a snippet of my HTML code:

<div class="order-type-buttons col-12 d-flex" aria-label="First group">
<button type="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Online Pick Up</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/online-pickup-icon.png" alt="">
    </div>
</button>
<button type="button" role="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Online Take out</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/online-take-out-icon.png" alt="">
    </div>
</button>
<button type="button" class="btn order-type-btn-blue col-4 d-flex justify-content-center align-items-center">
    <div class="col-8 button-text">Pick up</div>
    <div class="col-4 span-img">
        <img class="img-fluid" src="images/icon%20files/pick-up-icon.png" alt="">
    </div>
</button>

For context, here is some CSS code that I've implemented:

  .btn{
    white-space: normal;
}


.button-text{
    padding-left: 0;
    padding-right: 0;
}

.order-type-btn-blue{
    background-color: #0082d5;
    font-size:14px;
    color: white;
    text-transform: uppercase;
    margin: 2px 2px 2px 2px;
    padding-right: 0;
    padding-left: 0;
}
.order-type-buttons {
    padding-right: 0;
    padding-left: 0;
}
.span-img{
    padding-right: 0;
    padding-left: 0.313em;
}

If you'd like to see how the buttons currently appear and then after changing the button height and font size, check out the links below:

Current Button Appearance: https://i.sstatic.net/WkDt6.png

New Button Appearance: https://i.sstatic.net/qgsaP.png

To get a visual representation, view this image showcasing the layout with borders: https://i.sstatic.net/lBMYq.png

csshtmltwitter-bootstrapbootstrap-4

Answer №1

To achieve better responsiveness, consider adjusting the width and setting the height to auto. Bootstrap often defaults to auto height when the width is defined.

Alternatively, you can use percentage or vh units for scaling the height in order to enhance responsiveness.

Answer №2

When adjusting the height of an image, keep in mind that its responsiveness will be based on the width, not the height. Therefore, if you decrease the button height without reducing the width, the image height will remain unchanged.

To make the image responsive to the height as well, additional code would need to be implemented.

One approach that may work is setting a height on the image container and applying a max height to the image itself:

.span-img {
    height: 100%;

    /* Optional for right alignment */
    display: flex; 
    justify-content: flex-end;
}

.img-fluid {
    max-height: 100%;
}

This setup allows the image to adjust to changes in height. To see this concept in action using Bootstrap, check out the following link:

https://codepen.io/arthurrandom/pen/wRwMvw

The extra flex settings on the .span-img class are specifically for aligning the image to the right and are not essential for achieving a responsive height image.

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

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Is it feasible to implement a table-responsive solution that adjusts column width based on the length of data within each column, while still allowing the thead to occupy the entire canvas width? For Example: (the last column with no content should take u ...

csshtml-tablebootstrap-4

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

Angular applications can redirect to their own internal pages when linking to an external URL

I've recently started using Angular and have encountered a minor issue. My routing setup is working as expected in the navbar, but I have a link that points to an external URL. When I click on it, instead of redirecting me to the external site, it ta ...

htmlangularroutes

Guide to expanding the sidebar width

As I delve into the world of CSS, I find myself puzzled by the issue of expanding the sidebar to ensure that the "Gestion des utilisateurs" section appears on a single line. https://i.stack.imgur.com/xzFEA.png To provide context, I have included an illus ...

css

How can you utilize jQuery to export multiple-page HTML content into a PDF document?

I'm having trouble exporting HTML to PDF using jQuery, especially when the HTML content spans multiple pages in the PDF file. Below is my current code snippet: $("body").on("click", "#downloadPDF", function () { html2canvas($('#dow ...

javascripthtmljquerypdfpdf-generation

Flexbox won't align child elements of parent vertically

I am currently facing an issue with my parent container div and its child elements. Even though one child element is being vertically centered, the other two child elements remain at the top of the page. I have been trying to troubleshoot this problem but ...

htmlcssangularflexbox

Open the HTML file for this multi-tabbed AngularJS webpage

I stumbled upon this jsfiddle demo code that offers multiple tabs for a single AngularJS webpage. http://jsfiddle.net/helpme128/99z393hn/ I decided to integrate it into my own project. I specifically wanted one tab to load a particular webpage called my- ...

javascripthtmlcssangularjstabs

Managing and authenticating HTML checkboxes using Spring MVC controller

Currently working with Spring MVC and designing a user registration page. I want to provide users with the choice to opt-in for email notifications and agree to Terms of Service before signing up. Due to using Thymeleaf as my templating engine, I am facing ...

javahtmlspring-mvcthymeleaf

Tips for creating a more seamless box transition within HTML

I've been searching for information on this topic, but I haven't been able to find a satisfactory answer. I want to create a div that displays "Contact Us" and when clicked, smoothly reveals a layer with input fields. I know I can use JavaScri ...

javascriptjqueryhtmlcss

Tips for centering the bootstrap navbar on a page

Utilizing bootstrap, I have designed the following navbar: https://i.sstatic.net/shYC3.png This navbar was created using the code snippet below (Bootstrap version 3.3.5): <body> <nav class="navbar navbar-default"> <di ...

htmlcsstwitter-bootstrap

PHP database results placed one on top of the other

My current code snippet looks like this: while ( $row = mysqli_fetch_assoc($result) ) { echo '<div class="leaders" style="background-color:#ada30a;">' . $row['playername']; echo "<br>"; echo $row['points&a ...

htmlcss

Increase and decrease thumbnail size using an onclick event

https://i.sstatic.net/oDkB9.png I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issu ...

javascripthtmlcssthumbnailsimage-resizing

Is there a way to utilize JQuery to swap out a CSS background image while preserving the gradient effect?

Currently, I am facing a challenge in dynamically updating the background-image property of a div while preserving other background-related properties (such as color and gradient) using jQuery's .css() function. Although I can successfully replace the ...

javascriptjqueryhtmlcssbackground-image

Jspsych: Centering and aligning 3 p tags to the left on the page

Feeling pretty stuck at the moment. Here's what I have visually right now: https://i.sstatic.net/FUzgM.png I added a caption in Comic Sans and an arrow using MS Paint. Each line with color swatches is wrapped in a p tag. The goal is to center thes ...

javascripthtmlcssjspsych

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

I've been attempting to display the updated value of the totalQuestions variable in the HTML, but I keep encountering the following error. Can someone point out where I went wrong? https://i.sstatic.net/mEEMS.jpg HTML <label><span class="r ...

javascripthtmlvue.jsvuejs2

Transmitting HTML5 application settings via URL

I am interested in creating an HTML5 app that utilizes the WebAudio API. This app will allow users to customize certain parameters. Users should be able to 'share' these settings by sending a share URL, which can be clicked by others to view the ...

javascripthtmlweb-audio-api

What is the best way to style a tiled design using CSS?

What is the best way to code the page without using javascript? Both of the HTML elements (div1, div2) need to have a fixed size. ...

htmlcss

AngularJS Ion.RangeSlider not automatically adjusting the minimum and maximum values when a specific button is clicked

I have created a custom slider directive using ionRangeSlider. When I click a button, the min and max values of the slider should be updated dynamically, but for some reason it is not working as expected in the directive. I tried adding a watch function in ...

javascriptjqueryhtmlangularjsrangeslider

Unable to modify the focus outline for .custom-control-input within Bootstrap 4

After spending countless hours attempting to change the focus outline color of the custom bootstrap controls, I have hit a roadblock. Changing the background is a breeze with: .custom-control-input:checked~.custom-control-indicator { background-color: re ...

cssbootstrap-4

The insider's guide to understanding the inner workings of the :nth-child() property

I am finding the :nth-child() property to be a bit confusing. Sometimes it takes arguments like :nth-child(2),:nth-child(2n),:nth-child(2n + 1). I'm not sure what these mean exactly - are they referring to even or odd divs, or is there another propert ...

htmlcss