Question

我有三个要素：

。主要
＆gt; .img-container
＆gt;＆gt; 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

在<input type="checkbox" id="check" /> <div></div>类

中使用高度

<强> DEMO

.main .img-container

Answer 2

试试这个。为我工作。我已经改变了图像容器的最大高度和图像的高度。

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

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

    img {
        height: inherit;
    }
  } 
}

Answer 3

可能你想要这个

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

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



    img {
        height: 100%;
    }
    }
}

我已经用高度替换了max-height，并在主容器中添加了text-align到center。如果您不需要中心的图像，请删除text-align：center

Answer 4

这是解决方案。它正在为我工作

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

.img-container {
    background-color: #ddd;
    height: 100%;
   width: 80%;

    img {
        height: 100%;
    }
   }
 }

图像不占用容器的高度

4 个答案: