Force CSS to square image in a responsive container

Question

I have a responsive image grid background in my website. All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.

Example OK:

[H][H][H][H][H][H]  
[H][H][H][H][H][H]  
[H][H][H][H][H][H]

Example FAIL

[H][H][H][H][H][H]  
[H][H][H][A][H][H]  
            [H][H]  
[H][H][H][H][H][H]

I dont want to use mansory o other plugins, this is my code:

HTML

<div class="resp pull-left">  
<a href="#"><img class="img-responsive indexUser" src="image.jpg"></a>  
</div>

CSS

.resp{
    width:10%;
    height:10%;
}
.resp img{
    width:100%;
}

Im using Bootstrap 3. Is it possible to do it?

EDIT WITH MORE INFORMATION

I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:

my website screenshot

Is responsive and I need to use % in with to adjust perfectly fullscreen allways

You can find a solution here: http://stackoverflow.com/questions/23400232/force-bootstrap-responsive-image-to-be-square?answertab=votes#answer-23518465 — Diogo Bruni, Mar 26 '15 at 16:08

johnkavanagh · Answer 1 · 2013-11-25T15:41:36.377

There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.

If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.

As a code example of point two above:

.resp a{
    display: block;
    max-height: 300px;
    overflow: hidden;
}

Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.

Hi man! I can't use the grid because I need sticky images and grid has padding or margin, nevermind, with your answer is the same. The problem its not solved... — pekpon, Nov 25 '13 at 12:55
You need to ensure that the anchor has 'display: block' set, and that the max-height is correct for use. With those two things in-place, you will not find some images falling taller than others (they will all be restrained at whatever height you set in the CSS). — johnkavanagh, Nov 25 '13 at 15:42

score 0 · Answer 2 · answered Nov 25 '13 at 11:03

You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.

This is one linked image in a div, not a grid:

<div class="resp pull-left">  
    <a href="#"><img class="img-responsive indexUser" src="image.jpg"></a>  
</div>

score 0 · Answer 3 · answered Nov 25 '13 at 11:17

0

<figure><img src="images/edu.jpg"></figure>

figure img {
width: 100%;
}

answered Nov 25 '13 at 11:17

Bipin Kumar Pal

1,009
2
8
16

Force CSS to square image in a responsive container

3 Answers3