Question

我有一个带有标题和副标题的div-Container。在这些组件下，我想插入一个图像，该图像应采用可用的其余高度，并按比例缩放。

我尝试过很多东西，也就是桌子上的东西。没有什么对我有用。

<div id="mapWrapper">

<div class="box" id="map">

    <div style="display: table;">

        <div style="display: table-row;">
            <h1>Heading</h1>
            <p>Some subtitle.</p>
        </div>

        <div style="display: table-row;">
            <img src="http://www.gettyimages.de/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg" />
        </div>

    </div>

</div>

body {
    background-color: red;
}

.box {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 3px;
    overflow:hidden;
}

#mapWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    background: green;
    padding: 5px;
    height: 200px;
    overflow: hidden;
 }

 #map {
     height: 100%;
 }

我在jsfiddle上插入了我的代码：http://jsfiddle.net/47J9s/

如果有人为此获得解决方案，那就太棒了。

Answer 1

你必须删除身高：

#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
background: green;
padding: 5px;
/* height: 200px; */
overflow: hidden;
}

评论后：

<强> CSS

body {
    background-color: red;
}

.box {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 3px;
    overflow:hidden;
}

    #mapWrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        text-align: center;
        background: green;
        padding: 5px;
        overflow: hidden;
        height:200px;
    }

    #map {
        height: 100%;
    }

    img{
        height: 85px;
        width: 620px;
    }

fiddle

让div与图像得到剩余的可用高度

1 个答案: