Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area as it has a width of 100%.

However, when I resize the page, the text in the span3 section takes up more lines causing the entire div to become taller than the image. This results in an undesirable layout:

My goal is to have the image fill up the entire height of the div without distorting its aspect ratio. I've been struggling to achieve this through CSS as I don't want the image to stretch vertically beyond its original size.

What I envision is for the image to crop or clip from the right side and expand vertically whenever the div becomes narrower but taller.

I attempted to create a fiddle to demonstrate this issue, but due to Bootstrap switching to mobile CSS in smaller windows, it's not accurately represented unless you view it in fullscreen and resize your browser: Fiddle

You can also see the live version of the problem on my website: Live Site.

htmlcsstwitter-bootstrap

Answer №1

To check if your span-9 element is already occupying the full height of its parent (which it should), you can make the image a background image using CSS. You can achieve this by adding the following code or even include a short inline 

style="background-image: url(...)"
and then scale it with:

.fullheightimg{
    background-size: cover;
    background-positon: center right;
}

You can find more resources and in-depth reading about scaling background images on Mozilla's website at: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

Here is an example addressing your issue:

@media (min-width: 970px) {
  .banner .row-fluid {
    display: table;
  }
  .banner .row-fluid .span3, .banner .row-fluid .span9 {
    float: none;
    display: table-cell;
  }
}
.banner .row-fluid .fullimage {
  background-image: url('http://santamonicacentric.com/site/wp-content/uploads/2014/07/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg');
  background-size: cover;
  background-position: center left;
  min-height: 150px;
}

Answer №2

Since the solution provided by Danielwinter was ineffective, I had to take matters into my own hands and discover a new approach.

I have determined that the mobile style should be implemented for browser widths of 767px and below, while the image should resize for browser widths of 1223px and below.

To address this, I included a new div in the HTML code with the class banner_image. This div will utilize the image as a background with the size property set to cover.

CSS

.banner_image {
   background: url(http://kursus.billetten.dk/wp-content/themes/kurser/img/header_image.jpg) no-repeat;
   background-size: cover;
}

The original image (inserted with <img> tags) should disappear once the image is supposed to resize using the new div. To ensure that the image does not have a fixed height, I matched the height of the div with text to the height of the image using jQuery. Additionally, to prevent the image from maintaining its size when the window is resized, I encapsulated the entire code within a function that executes on window resize.

jQuery

var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
    $('.banner_image').show();
    $('.banner_image').height($('.banner .span3').height());
    $('.banner .span12 img').hide();            
}
else {
    $('.banner_image').hide();
    $('.banner .span12 img').show();
}

$(window).resize(function() {
var windowWidth = $(window).width();
    if(windowWidth > 768 && windowWidth < 1223){
        $('.banner_image').show();
        $('.banner_image').height($('.banner .span3').height());
        $('.banner .span12 img').hide();                
    }
    else {
        $('.banner_image').hide();
        $('.banner .span12 img').show();
    }
});

By implementing this method, the image adjusts its size during window resizing, the original <img> is hidden within a certain width range, creating an optimal user experience overall.

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

Footer content spilling out of the wrapper div

My web page has a footer content that is overlapping the wrapper div due to some issues with my css and html. Even when I tried changing the height to auto, it didn't resolve the problem. Below is an example of the current state of the page I am worki ...

csshtmloverlapping

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...

cssangularsass

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Mobile devices consistently experiencing issues with JavaScript generated elements overlapping

I'm currently in the process of creating a quiz based on a tutorial I found at https://www.sitepoint.com/simple-javascript-quiz/. While I followed the tutorial closely and integrated Bootstrap, I am encountering an issue specifically with mobile devic ...

javascripthtmlcss

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

merge various CSS styles into a single one

My div has a mix of styles applied to it. <div class="alert alert-secondary login-alert" role="alert">Please contact the administrator to receive credentials!</div> The styles alert and alert-secondary are default styles from bootstrap 4, whi ...

cssbootstrap-4

Having trouble with Jquery's .mouseover() method? Let's catch the solution!

I'm currently working on a jQuery homework assignment and I've been attempting to enhance the mouseover feature, but unfortunately, it's not functioning as expected. $("button").mouseover(function() { $(this).css({ left: (Math.rando ...

javascriptjqueryhtmlcss

The arrangement of my inline-block divs is oddly meandering in a zig-zag pattern

I am attempting to visualize basic commands and their arguments in HTML. Here is the expected output: https://i.stack.imgur.com/MTxbV.png However, the actual output looks like this: https://i.stack.imgur.com/biPFw.png This is the code I utilized: ht ...

css

The Tailwind Typography plugin simply maintains the default font size of heading tags without altering their style

I've been working on parsing an MDX file and converting it into React components. My tech stack includes TailwindCSS, Next.js, and React. Following the Tailwind documentation, I have installed the tailwind/typography plugin. In my tailwind.config.js ...

htmlcssreactjsnext.jstailwind-css

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

javascriptphpjquerycssajax

The HTML object is experiencing difficulties with the Ajax page loader feature not functioning as

I attempted to use the code below in order to show an Ajax loader image while the page loads into an HTML object. Unfortunately, it didn't work as expected and I'm having trouble figuring out why. Everything seems to be functioning correctly exce ...

jqueryhtmlajax

The style attribute transforms the background-image url quotation to become &quot;

I'm currently working on creating a catalog component that will allow me to display images, titles, and descriptions multiple times. Below is the code for this component: import React from "react"; import '../pages/UI.css'; import ...

htmlreactjsjsx

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

htmlcssvue.js

Error in zone: 140 - Property 'remove' is not readable

I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...

javascriptjqueryhtmlangularkendo-ui

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Being relatively new to Bootstrap 4, as I have only used version 3.3 on my previous project which did not utilize the flexbox grid system. Now that I am embarking on a new project, I find myself facing a challenge: I am struggling to apply the "text-alig ...

htmlangularflexboxbootstrap-4

What is the method to restrict the selection of only one option for specific values in a multiple-selection dropdown menu?

Is there a way to create a dropdown menu with the following functionalities: I want to allow multiple selections for options A, B, and C, but disable multiple selection if option D is selected. Any tips on how to achieve this? Thank you. <label>Ch ...

javascripthtml

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

Conceal a child div through the use of AJAX technology

Utilizing AJAX, I am loading pages on my website. Each page consists of two common div elements - the header div and the content div. When navigating from one page to another, I load the content div of the next page into the current page using the followin ...

javascripthtmlajaxback-button

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

javascripthtmlcss

iOS SDK - The Ultimate Tool to Unlock HTML 5 Player

Currently, I am facing a challenge while using Hpple to extract links from webpages. Due to the lack of support for Flash on iOS, I have to resort to the HTML 5 player. My objective is to locate and access this player. In scenarios where the website loads ...

ioshtmlsdkhpple