Bootstrap CSS：使图像缩放以填充整个表格单元格

Question

我无法将图像显示在桌子的单元格中，并且无需拉伸就可以填满整个空间。

这是正在发生的事情（图片拉伸）：

我想要的（图片被缩放/裁剪）：

或者也适用（图片高度为100％，宽度相对）：

这是我对问题所做的一个小提琴：

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

这是我一直在尝试（和失败）的一些CSS：

#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;
}

谢谢！

Answer 1

这对你有用吗？使图像绝对位置。

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 */
}