What is the best way to ensure that an image fills the entire page in Bootstrap 4 by setting a maximum height for both the column and container

I am facing an issue with displaying two columns in a row using Bootstrap 4. I want the image to take up the entire screen space. Here is my code snippet:

<div class="container-fluid" style="padding-left:0px;">
        <div class="row">
            <div class="col-md-6 ">
                <img class="img-fluid" src="jumbo_background.jpg" />
            </div>
            <div class="col-md-6">
                <div class="contact-wrapper">
                  <p>Test</p>
                </div>
            </div>
        </div>
   </div>

Although everything seems to be working fine and responsive, the displayed result is not as desired:

https://i.sstatic.net/2GJMp.png

The outcome I expect looks like this:

https://i.sstatic.net/IHf2z.png

The image dimensions that I have used are 6000 X 4000

I have attempted the following solutions:

html, body {
height: 100%;

}

Upon inspecting the browser using Google Dev Tools, the body appears to be 100%, but it does not yield the desired result.

I have also tried using h-100 from Bootstrap without success.

Setting height: 100vh; makes the design unresponsive on smaller devices.

I referred to the link below for assistance:

Height not 100% on Container Fluid even though html and body are

However, I still haven't achieved the desired output. How can I make the image cover the full height in Bootstrap 4?

UPDATE:

Following a solution with resolution 1156 x 1013

https://i.sstatic.net/7h512.png

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

It appears that you are interested in utilizing the image as a background. My suggestion would be to implement it in this manner, as it offers better cross-browser compatibility (not that using <img> alone is impossible, but utilizing background-image is simpler). I have retained the <img> tag for two reasons:

  • SEO indexing purposes (if necessary)
  • To properly size the column on mobile devices.

However, please note that the <img> remains invisible, with the focus solely on the background image of the <div>.

Here is a solution that involves extracting the src attribute from the first <img> element within each .column-image, and utilizing it as the backgroundImage of the <div>. To make this function correctly, ensure that the <div> has the class image-column:

$(function() {
  $('.image-column').each(function() {
    const src = $('img', this).eq(0).attr('src');
    if (src) {
      $(this).css({ backgroundImage: `url(${src})` })
    }
  })
});
.image-column {
  min-height: 100vh;
  background: transparent no-repeat center /cover;
}

.image-column .img-responsive {
  visibility: hidden;
}

@media(max-width: 767px) {
  .image-column {
    min-height: 0;
  }
  .image-column .img-responsive {
    width: 100%;
    height: auto;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1a051a1a0f184400192a5b445b5c">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 image-column">
      <img src="https://i.picsum.photos/id/237/600/400.jpg" class="img-responsive">
    </div>
    <div class="col-md-6">
      <div class="contact-wrapper">
        <p>Test</p>
      </div>
    </div>
  </div>
</div>

Note: although it functions as both the src of the <img> and background-image of the <div>, the resource (image) is only fetched once.

Answer №2

Check out this resolution:

html, body, 
.container-fluid .row, 
.container-fluid .row .col-md-6, 
.container-fluid .row .col-md-6 img { 
height: 100vh !important;
}

Please include an example for the mobile version as well for reference in writing a solution.

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

Differences between Bootstrap 5 gutter and margin

I have a question that I'm struggling to understand. I've been looking at the Bootstrap v5 documentation and noticed a lot of changes from v4, particularly regarding gutters. Could someone please clarify the difference between using gutters and ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Using jQuery and AJAX manipulates the value of my variable

My AJAX request seems to be causing jQuery to change the variable that is passed to it. Here is the JavaScript code: <script type="text/javascript"> function ResolveName(id) { $.ajax({ url : 'resolvename.php', ...

javascriptjqueryajax

Is it possible to change the order of elements in the navbar using HTML/Bootstrap depending on the state of the responsive menu toggle?

I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8. When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes: ...

htmlcssangularbootstrap-4

utilizing various ajax functions

I'm having trouble using additional functions with the "complete:" option in JQuery ajax after the "selectOptionSort" function. Can anyone help me figure out what's wrong? $('#tipos').change(function(){ $("#marcas ...

javascriptjqueryajax

Is the tab not displaying correctly when using Bootstrap 5 button functionality?

With Bootstrap 5, I have a modal that contains two tabs for login and register. However, I am facing an issue where the tab is not displaying correctly based on the button click. The desired behavior is that clicking on the login button should activate th ...

javascriptbootstrap-5

What is the best way to control the amount of rows displayed in my gallery at any given time?

I need help with customizing my gallery that is dynamically generated from a directory using PHP. My goal is to display only 2 rows of 4 images each, totaling 8 images, with a "show more" button for loading additional rows. How can I set a limit on the n ...

javascriptphpjquery

Incorporating URL parameters into an HTML form using JavaScript or jQuery

I need to pass variables in the URL to populate an HTML and Liquid form and then submit it. Here is an example URL: http://www.example.com/[email protected] &customer_password=123456 I came across this question which is somewhat related to what ...

javascriptjqueryhtmlforms

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

javascripthtmlcssweb-componentshadow-dom

A div element with a set width that contains an inline child element

I recently created a basic HTML document with two elements: a div with a fixed width, and an image placed after it. According to my understanding, images are inline elements, so I expected the image to appear next to the div on the right side since there ...

htmlcss

Seamless blend of images with a stunning mosaic transition effect

I attempted to create a mosaic effect on my carousel similar to this example: , but not exactly like this. I want to include control buttons for next and previous, and have images in HTML tag. However, my attempt is not working and I need help. This is ...

jqueryhtmlcss

Keep the navigation bar in motion as the page is scrolled

I am currently designing a webpage with Bootstrap and have a fixed top navbar along with a side navbar that uses scrollspy for content navigation. However, as I scroll down the page, the side navbar remains static and does not move along. I would like both ...

htmlcssbootstrap-5

Can a function be called when using ng-options with AngularJS select?

Here is some HTML code <select ng-model="selectedMarker" ng-options="shape.text for shape in Selects('shapes')"> </select> And below is the JavaScript code angular.module('todo', ['ionic']) . ...

javascriptjqueryangularjsangularjs-scopeangularjs-service

What strategies work well for guiding individuals to different destinations based on their user roles, such as administrators and regular users?

In my CMS environment, I am facing a challenge with redirecting users who are not administrators or do not own the document they're trying to edit. The following code snippet is what I have implemented, but it seems that my administrators cannot acces ...

phphtmlmysqlhttp-redirect

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

javascripthtmlcssnull

"How to automatically populate an input field with a value when the page loads in an

I need assistance with setting the input value to 1 when the page is loaded, but for some reason, it remains empty. Can someone help me troubleshoot this issue? <tr *ngFor="let item of cartItems; let i=index"> <td class="cart_pr ...

javascripthtmlangular

The perplexity regarding asynchronous functions and return statements

I'm attempting to send a request to a Web API and then return true from a function if the input is valid, or false if it's not. I need the request to be asynchronous so that the function doesn't return before the request is verified. While t ...

javascriptnode.jsdiscord.js

Tips for transferring a prop from a parent component to a child in Vue.js

I have a main component named Stepper that includes a child component called ShortSummary. I am attempting to pass a property from Stepper to ShortSummary by clicking on a radiobutton, but it is not working! Here's my setup. This is the code for Stepp ...

javascripthtmlcssvue.jsvuetify.js

Using ngrx to automatically update data upon subscription

Background The technology stack I am using for my application includes Angular 4.x, ngrx 4.x, and rxjs 5.4.x. Data is retrieved from a websocket as well as a RESTful API in order to share it between multiple components through ngrx. Currently, data is ref ...

javascriptangularrxjsngrx

responding to a forum comment in jquery by either replying or quoting

I'm attempting to develop a forum "quote" feature, similar to reply options on many forums. However, I am struggling with selecting the appropriate items from my comment and dealing with dynamically generated IDs. Here is the HTML of my comment: & ...

javascriptjqueryhtml

Dealing with numerous file uploads: At what point does the array update when you add an item to it?

I am facing an issue with creating a file input that allows for multiple CSV files to be uploaded simultaneously. Each file goes through data cleaning functions and is then added to a global array. However, the array does not seem to update even though it ...

javascriptjquery