CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
mahdi yamani
mahdi yamani

Reputation: 933

css-bootstrap- How to make responsive images in a row

This is an image of what I need : enter image description here

as you can see, the width of the second image is much bigger that others . it's from a responsive website though .

This is my code and what I've got so far by using bootstrap

<div class="row">
<div class="col-md-3">
    <img src="4.jpg" class="img-responsive" />
</div>
<div class="col-md-5">
    <img src="4.jpg" class="img-responsive" />
</div>
<div class="col-md-4">
    <img src="4.jpg" class="img-responsive" />
</div>
</div>

the result : enter image description here

as you can see, each image's height is different . the widths are good but the height are not in-line .

What should I do to get something like the first image ?

Upvotes: 3

Views: 1346

Answers (3)

anji
anji

Reputation: 344

Try this, see the code in jsfiddle : http://jsfiddle.net/zj9v81t7/15/

.row {
    border: 1px solid red;
    float: left;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
.col-md-3{width:28.5%; float:left;}
.col-md-4{width:28.5%; float:left;}
.col-md-5{width:43%; float:left;}

Upvotes: 0

Cooleronie
Cooleronie

Reputation: 1315

From the first example it's a 3-6-3 grid, and on mobile probably 12-6-6. To accomplish this I would recommend to alter (crop) the images so they have the right aspect ratio. It's one minute work, and you won't need to use overflow:hidden. I am pretty sure that's what they did in the first example.

Upvotes: 1

rwacarter
rwacarter

Reputation: 2004

Wrap each img in a span:

<div class="col-md-3">
    <span class="img-responsive-wrap">
        <img src="4.jpg" class="img-responsive" />
    </span>
</div>

Then add CSS something like this: 

.img-responsive-wrap {
    display: block;
    height: 200px;
    overflow: hidden;
}

Upvotes: 3

Related Questions