CODEWITHSUNDEEP
htmlcssimage
ynghype
ynghype

Reputation: 37

Fixed image in a div

I'm trying to make 3 <div> boxes with a fixed height and width of 500px;

I'm trying to take 3 different images and have them fit inside the <div> boxes

I've tried to fit an image off tumblr lets say, or imgur and most images will fit to a random size, but some don't stretch the full of the <div> box.

So I have;

<div class="row">
    <div class="col-md-4 portfolio-item">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-2x">tstmkr</i>
            </div>
        </div>
        <img src="http://goo.gl/2GDUPT" class="img-responsive" alt="" />
        <!-- </a> -->
     </div>
 </div>


#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;

}

Upvotes: 0

Views: 53

Answers (2)

user2620028
user2620028

Reputation:

You need to apply width:100% to your img tag if you want it to take up 100% of its parent.

style="width:100%;"

Or give it an id and create a width:100% for it in the style sheet.

http://jsfiddle.net/jGyr2/

Is that what you are looking for?

Based on what you have asked it actually sounds like this fiddle here demonstrates what you are wanting

http://jsfiddle.net/jGyr2/1/

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16157

Don't put the image in the <div> directly.
Put it as a background-image, than set background-size: cover;
This way, the image will stretch to cover full <div> box, as you want.

Upvotes: 1

Related Questions