Bootstrap 3 Issue: Images not fitting DIV?

HTML & CSS
1

Hi All,
Hope this is in the right section.

I am building a site within the Bootstrap 3 Framework (one of my first using BS3) and am coming across something I can’t seem to figure out.

The site I am referencing can be seen at www.cpointweb.com/bsa/ and it involves the two columns in the center (below the large header).

All images are of the same size as the header and footer image. Although I wanted to style those two differently. My idea was to have the left one smaller than the right one however I can’t figure my way around that white space and how to fill it.

Am I missing something here? Can anyone point me in the right direction?

Here Is Code for index.html

  <div class="row">
<div class="grid"> 
  <!-- HEADER -->
  <header id="header" class="col-sm-12 col-lg-12">
    <figure class="effect-ruby"> <img src="img/collage_four.jpg" alt="img01"/>
      <figcaption>
        <h2>NEW <span>BEGINNINGS </span></h2>
        <p>Milo went to the woods. He took a fun ride and never came back.</p>
        <a href="philosophy">View more</a> </figcaption>
    </figure>
  </header>
  <!-- INDIVIDUAL SECTION -->
  <div id="quality" class="col-sm-6 col-lg-5">
    <figure class="effect-marley"> <img src="img/collage_two-lg.jpg" alt="img01"/>
      <figcaption>
        <h2>OUR <span>TEAM</span></h2>
        <p>Milo went to the woods. He took a fun ride and never came back.</p>
        <a href="#">View more</a> </figcaption>
    </figure>
  </div>
  <div id="slider_container" class="col-sm-6 col-lg-7">
    <figure class="effect-marley"> <img src="img/collage_one.jpg" alt="img01"/>
      <figcaption>
        <h2>OUR <span>TEAM</span></h2>
        <p>Milo went to the woods. He took a fun ride and never came back.</p>
        <a href="#">View more</a> </figcaption>
    </figure>
  </div>
    <div id="reputation" class="col-sm-12">
      <figure class="effect-ruby"><img src="img/collage_three-lg.jpg" alt="img01"/>
        <figcaption>
          <h2>EXPERIENCE <span>SPEAKS</span></h2>
          <p>Milo went to the woods. He took a fun ride and never came back.</p>
          <a href="#">View More</a> </figcaption>
      </figure>
    </div>
</div>

The CSS elements have no styling, other than resetting margin/padding. I can provide that if necessary.

Any help would be greatly appreciated.

Thanks,

2

Just a note: When I set the columns to col-lg-6 (both the left and right one) they fit perfectly.

3

I am looking at the two columns and the left is smaller than the right. It seems to be styling just f ine. Did you manage to fix this? I can screenshot what I’m seeing if you need. Using Chrome37.

4

No, they are working properly. However you’ll notice the image does not fill that DIV on the left. That is what I am trying to figure out. Why the image won’t fit the DIV.

5

I applied the following to both ID’s

min-height: 100%;

and it appears to be working, however the image stretches now. Is there way for it to instead of stretching, just fill?

6

Sorry I should clarify that:

#slider_container img {
min-height:100%;

};

#quality img {
min-height:100%;

}

7

I’m sorry if I misunderstand but the original image is 415px and your min-height:100% makes the divs height, 405px. The image is basically displaying exactly as it was made - minus being squeezed in a bit since the original image is 915px. What exactly were you expecting in the end-game? To me, in Chrome at least, this doesn’t look bad or stretched.

8

Sorry for any confusion. For me the images (being over 900px wide) seem to shrink/squeeze into the DIV and distorts the image for me. Is there a way for me to get the image to fill the DIV rather than resize to FIT the DIV.

Hopefully that makes more sense. I’ve attached an image

990×415 420 KB

9

Sure - make the div over 900px wide so it doesn’t distort the image.

Joking aside, check out this link.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Check out those values. If they sound like what you are going after then remove the <img> and make it a background-image.

Honestly, your image is over 900px wide. Expecting it to go into a 400px element is obviously going to cause distortion. Still not 100% sure on what you expect to accomplish. I’m pretty dense :stuck_out_tongue:. Sorry.

Why do you have your image be around 900px if you are only going to allow 400px for it? Why not just remake the image?

10

Hi,

If those two images side by side were in a div of 50% each then you would have no issue scaling them as the aspect ratio of the image could be maintained. You would simply set the image to width:100% and its height to auto (no min/max width/heights needed). The aspect ratio would be maintained and both images would be the same height when the page is wider or smaller but of course the height would change with page width in order to maintain the aspect ratio. (This assumes that all images start out as 990 x 411 naturally).

As it is you have one div of 60% and one div of 40% (approx) which means that the aspect ratio can never be maintained because the height would need to be smaller on the smaller width element. Setting a min-height will just distort the image.

The easiest option would be to change the divs to 50% wide and the problem goes away unless you need to maintain a minimum height.

The alternative is to do as Ryan suggests and use a background image and use background-size:cover to fill the background without distortion.

11

Bootstrap is re sizing the image by percentage to make it responsive and fit in the that div. a “col-sm-6 col-lg-5”. Those are the settings for that div to make up for “col-sm-6 col-lg-7” next to it.

I think in this case you have two options.

  1. re sizing the image would be best, or trying to put it in the css as a background image?
    2.looks like 767 is about the break point for your image changing to the tablet size. you could use a @media setting in your css to specify a diff image for the larger screen and keep the one you have for the tablet.

D

12

I completely understand that. My initial thought was for it to cover the dimensions of the DIV rather than FIT into the DIV.

Remaking the image is fine. The real and original problem that exists is that before when I had the two columns different sizes, the left one was not filling the entire DIV. But the explanation has helped me understand so I appreciate that.

Thank you all for the help. The easiest solution is to have both set at 50% (col-lg-6) so I’ll be going with that.

13

pretty sure that will scrunch the image w/the cameras and green screen…i’d give the @media query a shot.

14

Here is what I am looking at with the changes I made:

http://cpointweb.com/bsa/index

15

Yes that was what I was thinking. Is that what you wanted?

I notice a bug in Firefox and it looks like you need to change the code to this:

.grid figure{display:block;margin:2px 0}

16

Yes, In a sense it was. My original idea was to have the left div smaller than the right (just for looks) but I am just fine with this and so is the client.

Thanks for all the help! I’ll look into that bug as well.

17

looks good congrats
D