image not taking the full height of the container - html

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.

Answer 3

img tag is inline-block by default, so you need something like this:
.about-content img {
display: block; /* remove extra space below image */
max-width: 100%;
height: 100%;
}

Answer 4

You have defined such style
.about-content img {
max-width: 100%;
height: auto;
}
which force browser to keep image aspect ratio.
Use image with correct aspect ratio or change style of img element.

Answer 5

There is a little change on line #14 in css. change max-width: 100%; to max-width: auto; height:auto to height:100% &
And Here is your code Make changes in your css and it will work. :
.about-content-wrapper {
margin: 2em 0 5em;
display: flex;
flex-wrap: wrap;
padding: 0 1em;
border:1px solid #ccc;
}
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
.about-content img {
max-width: none;
height: 100%;
}
.about-content h2,
.about-content p {
margin: 0 1em 0 1em;
}