CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Katie
Katie

Reputation: 48218

Bootstrap CSS: Make img zoom to fill entire table cell

I'm having trouble getting an image to show in a cell of a table and fill up the entire space without stretching.

This is what's happening (Image is stretched):

This is what's happening

This is what I want (Image is zoomed / cropped):

This is what I want

Or this works, too (Image is 100% height, the width is relative):

this is fine too

Here is a fiddle I made with the problem:

http://jsfiddle.net/5bLac31h/5/

And here's some css that I've been trying (and failing):

#cart_table
{
    table-layout: auto;
}

.cart_image
{

    height:80px;
    width:80px;

    max-width:80px; 
    max-height:80px; 
}

.cart_image img
{
    width:100%;
    height:auto;
    max-height:100%;
    overflow:hidden;
    display: block;
}

Thanks!

Upvotes: 0

Views: 1255

Answers (1)

Stickers
Stickers

Reputation: 78686

Will this work for you? Making the image absolute position.

DEMO: http://jsfiddle.net/5bLac31h/6/

#cart_table {
    table-layout: auto;
}
.cart_image {
    height:80px;
    width:80px;
    max-width:80px;
    max-height:80px;
    position: relative;
    overflow: hidden;
}
.cart_image img {
    position: absolute;
    left: 0;
    top: 0;
}

#cart_table td {
    border:2px solid red; /* only for debugging */
}

Upvotes: 1

Related Questions