1

I have a website with on the front page a div that is split up in two with the Twitter Bootstrap grid-system. Whenever the 2nd grid (span9) is higher than the 1st (span3), the image fills up the span9 beautifully (the images has width:100%).

enter image description here

If I resize the page however, the text in the span3 takes up more lines and makes the whole div higher than the image, resulting in the following:

enter image description here

Of course I want the image to fill up the complete height of the div, without stretching the image vertically (hey, it's not the 90s anymore!). However, I can't find out how to do this through CSS, without the image breaking out of the div in width.

What I want is that the image crops/clips from the right side and grows vertically every time the div gets less wide, but higher.

I tried setting up a fiddle, but because Bootstrap jumps to the mobile CSS in the small window, I can't replicate it unless you use fullscreen and resize your browser: Fiddle

Of course you can also just see it live.

Rvervuurt
  • 8,589
  • 8
  • 39
  • 62
  • would it be ok to 'stretch' the image? – jbutler483 Jan 08 '15 at 12:01
  • Well, no. As I mention `without stretching the image`. That's why I want to crop. – Rvervuurt Jan 08 '15 at 12:03
  • Perhaps you could use two different images. One cropped to fit the div's height on resizing? – U r s u s Jan 08 '15 at 12:08
  • The div resizes with the window, so I can't work with one cropped image, unless I make it 366px high, the maximum height of that div before it jumps to mobile view. I might try it out if it's not possible to fix differently. – Rvervuurt Jan 08 '15 at 12:11

2 Answers2

1

check if your span-9 already gets the full height of the parent (it should), if so, make the image a background image using css (or even a short inline style="background-image: url(...)") and then scale it using

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

Resources and further reading by Mozilla: 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.

This should be a full blown example of your problem:

@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;
}
danielwinter
  • 331
  • 1
  • 2
  • 10
  • But this will stretch the image, won't it? Going to try it out now. – Rvervuurt Jan 08 '15 at 12:18
  • background-size: cover prevents the image from being stretched. it just scales proportionally. You might want to position the background `center left` for the W+K Logo though. – danielwinter Jan 08 '15 at 12:18
  • I've [edited](http://jsfiddle.net/zt76m7t6/2/) the original fiddle, but the image still seem not to take full div height. – U r s u s Jan 08 '15 at 12:22
  • actually bootstraps grid is quite bad when it comes to full height divs (http://stackoverflow.com/questions/25213171/how-to-make-bootstrap-column-height-to-100-row-height) but there is a workaround: http://jsfiddle.net/danielwinter/zt76m7t6/3/ - You will need media queries for using this just on bigger devices though as it will break your breakpoints. I would suggest using purecss.io for a minimal grid. By using min-height on the fullimage you may further increase the minimum height of the image. – danielwinter Jan 08 '15 at 12:36
  • i edited my answer with a full solution for your site. – danielwinter Jan 08 '15 at 12:50
  • What HTML would you use to accompany your CSS? I can't get it to work. – Rvervuurt Jan 08 '15 at 13:29
  • you need to add the class fullimage to your span9 directly. – danielwinter Jan 08 '15 at 13:52
0

As the answer of Danielwinter didn't work, I had to continue playing on my own and found the following situation.

I know that the mobile style will be applied from 767px browser-width and below, and the image would have to resize from a browser width of 1223px and below.

In the HTML I added a new div with class banner_image. This div will get the image as a background with size 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 normal image (put in with <img>-tags) should disappear as soon as the image is supposed to resize with the new div. To make sure the image doesn't have a static height, I even the height of the div with text to the height of the image with some jQuery. To prevent the image keeping it's size when the window gets resized, I copy-pasted the complete code into a function that runs when the window gets resized.

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 doing it this way, the image resizes when the windows is resized, the original <img> is hidden when between a certain width and it just creates the overall best experience for the user.

Rvervuurt
  • 8,589
  • 8
  • 39
  • 62