5

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

Dhwani
  • 6,826
  • 15
  • 71
  • 133
Dhaval Chheda
  • 3,524
  • 3
  • 19
  • 36

5 Answers5

2

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.

David Wilkinson
  • 4,880
  • 1
  • 17
  • 32
  • David please check this fiddle https://jsfiddle.net/m9j61oua/9/ , I want the text section and the image section to be of the same height which will be evident from this fiddle as i have given borders to the containers and this is where the problem is , the more I shrink the window the gap at the bottom increases – Dhaval Chheda May 17 '16 at 12:20
  • @DhavalChheda I must've misread the question and assumed I knew what you meant rather than what you described. My mistake, I'll look into revising my answer. – David Wilkinson May 17 '16 at 12:26
  • @DhavalChheda Please check revised EDIT above. – David Wilkinson May 17 '16 at 12:56
1

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.

Johannes
  • 53,485
  • 15
  • 52
  • 104
  • I have set the height to auto and then used this selector .image-box { background-image: url('images/tower.jpg'); background-position: center; background-repeat: no-repeat; background-size: contain; } but it has the same height issue and the image is also repeating.. – Dhaval Chheda May 17 '16 at 13:00
0

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.

sQer
  • 916
  • 6
  • 9
  • i tried height : 100% and max-height: 100% but no go so can you please provide an example of what else may be tried.. – Dhaval Chheda May 17 '16 at 12:28
  • .about-content img { max-width: 100%; height: 100%; } seems to work : https://jsfiddle.net/qkcoggzx/ – sQer May 17 '16 at 12:38
  • You must to choose correct image for such component. Using wide image in this case is not good idea – sQer May 17 '16 at 12:41
  • please refer to this fiddle https://jsfiddle.net/qkcoggzx/1/ , I want the image to cover the full container.. – Dhaval Chheda May 17 '16 at 12:41
0

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;
}
vinayofficial
  • 324
  • 1
  • 3
  • 19
0

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%;
}