CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RhinoTekMN
RhinoTekMN

Reputation: 39

How to set image width to that of bootstrap column

This feels like a very simple problem that I am brain farting on. I have 3 images that I would like to display a certain way. Basically I want one image to fit a col-md/sm/xs-7 and 2 images to stack on top one another autofitting to col-md/sm/xs-3. All wrapped between a col-md/sm/xs-1 on either side.

I cannot figure out what CSS I need to tell the image to resize to that of the column. Any ideas?

Upvotes: 1

Views: 6018

Answers (1)

boymeetscode
boymeetscode

Reputation: 825

Something like this?

<div class="row">
    <div class="col-md-7">
        <image class="img-responsive" src="largeimage.jpg" width="200" height="400"/>
    </div>
    <div class="col-md-5">
        <div class="row">
            <div class="col-md-3">
                <image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <image class="img-responsive" src="yourSmallImage.jpg"  width="200" height="200"/>
            </div>
        </div>
    </div>
</div>

I don't quite understand what exact way you are trying to arrange pictures but I think this should help you. If you paint me a picture of how you want the pictures arranged I'll tailor my answer to you.

Edit: Ok, I think I might(?) understand now and this is my solution. You'll have to either size the images the way you want. Or, hopefully they are already the size you want it and will fit nicely. Give this a try.

Upvotes: 2

Related Questions