html - 图片不占容器高度

Question

我有三个要素:

.main
> .img-容器
>> 图片

.main有确定的高度，
.img-container 的最大高度等于容器，
img 应该占据包含的 div 的高度。

问题是图像不受容器高度的限制，如图所示 fiddle .

请注意，图像必须限制在容器的高度，而不仅仅是垂直居中。

感谢您的帮助。

这是当前的 scss:

.main {
    height: 200px;
    background-color: #eee;

    .img-container {
        background-color: #ddd;
        max-height: 100%;
        width: 80%; /* just to show the main container */

        img {
            height: 100%;
        }
    }
}

Answer 1

在 .main .img-container 类中使用高度

DEMO

.main .img-container {
    background-color: #ddd;
    /*max-height: 100%;*/
    height: 100%;
    width: 80%;
}