image not taking the full height of the container

Question

I was creating the about section of my site and was placing an image besides some text and now when i shrink the screen size the image for some reason is not taking up the full height of the containing <div>.. please check the fiddle and help me understand the reason for this.

The borders will show you the gap at the bottom which I don't want to show..

Please note that I do have bootstrap wired in as well for the project but I am not using it for this section.

Thanking all of you in anticipation

Answer 1

You've got min-width and max-width set on the images's parent, as follows:

.about-content {
    box-sizing: border-box;
    min-width: 200px;
    max-width: calc(50% - 2em);
}

Remove the min / max width properties and it works (note, I've added a media query in the CSS as per below): https://jsfiddle.net/m9j61oua/7/

Although pretty pointless as I don't know any devices that go that small, you could wrap it in a media query :

@media (min-width: 201px) {
    .about-content {
        min-width: 200px;
        max-width: calc(50% - 2em);
    }
}

EDIT - Further to comments below, I think the only way forward for you is to use a background-image on the second div, here's a fiddle: https://jsfiddle.net/m9j61oua/14/

Relevant CSS:

.about-content.bg-image {
  background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
  background-size: cover;
  min-height: 200px;
}

I've appended the class bg-image to your second div and removed the image element within it.

As you can see, it's not a perfect solution to what you're looking for, but with the right image and some media queries, you should be able to crack it.

Answer 2

The image isn't any higher. If you give it height: auto, it keeps its proportions, which usually is desired.

If you would set it to height:100%, it would be distorted, or (if you then set width to "auto") cut off a the sides.

One possibility would be to define the image as background image for its container and use background-size: cover; background-position: center; Background-repeat: no-repeat; on it. But this will cut off some parts of the image.

If you use background-size: contain;instead, you get the full image again, but with some space on either the sides or top and bottom.