Question

我想将png图像适合从另一个div继承其高度的div的高度。我已经看到如何通过将图像的最大高度设置为100％来完成此操作（在诸如此类的问题中How do I auto-resize an image to fit a div container），但这仅适用于我直接在div中指定高度的div像素。

我有一个topbar，我明确设置了它的高度，并且在其中有一个logodiv，它继承了topbar的高度。但是，除非我明确设置高度（注释代码），否则徽标不会调整大小以适应logodiv的高度。

当它应该被继承时，必须将高度设置两次似乎是错误的编码。有没有办法让图像适合正确的高度而不这样做？

的CSS：

#topbar{
    width:100%;
    height:45px;
}
#logodiv{
    float:left;
    /* height:45px; */
}
#logodiv img{
    max-height:100%;
}

HTML：

<div id="topbar">
  <div id="logodiv">
    <img src="images/project/logo.png" />
  </div>      
</div>

Answer 1

我想让png图像适合继承的div的高度它与另一个div的高度。

从技术上讲，logodiv 不从topbar继承其高度。它根据其内容（在这种情况下的图像）简单地扩展自己。

尝试将属性height:inherit;添加到第二个div，您就可以了。

<强> HTML

<div id="topbar">
  <div id="logodiv">
    <img src="images/project/logo.png" />
  </div>      
</div>

<强> CSS

#topbar{
    width:100%;
    height:45px;
}

#logodiv{
    float:left;
    height:inherit;
    /* height:45px; */
}

#logodiv img{
    max-height:100%;
}

Fiddle

Answer 2

试试这个css：

#topbar {
    width:100%;
    height:45px;
    border:1px solid red;/* for highlighting*/
}
#logodiv {
    float:left;
    height:inherit;
}
/*To clear float */
#topbar:after {
    clear:both;
    display:block;
    content:""
}
#logodiv img {
    max-height:100%;
}

演示：http://jsfiddle.net/lotusgodkk/4d4L1g0a/

将图像缩放为具有继承高度的Div

2 个答案: