CSS:根据图像的尺寸自动调整图像大小,并使用类似的div填补空白

Question

我有一个关于CSS和HTML的问题.我目前正在构建一个文章模板,并且在一个方面有点难过.

我计划在一侧有一张照片,并在另一侧有一个相同高度的文本框.两者都被div标签包围,如下面的源代码所示.

<!--begin article-->        
<div id="article">
    <div id="article_header">           
        Title goes here     
    </div>      
    <div id="article_body">
        <!-- begin text. used for actual text of article-->
        <div id="text">
            Text Goes here              
        </div>          
        <!-- end text-->            
        <!-- begin article media. used for pictures -->
        <div id="article_media">
            <img src="source_goes_here" alt="This is an image!">
        </div>
    </div>
</div>

而CSS ......

#article{
    border:1px solid gold;
    margin-bottom:20px;
}    
#article_header{
    padding:5px;
    font-family:arial;
    font-size:36px;
    font-style:bold;
    color:white;
    background:url('orangegradiant.png');
}
#article_body{
    padding:5px;
    display:inline-block;
    width:auto;
}
#article_media{
    border: 1px solid pink;
    text-align:center;
    display:block;
    width:48%;
    height:48%;
}
#text{
    display:block;
    width:51%;
    float:right;
}

我知道我有时候可能会超过div,但是我已经玩弄了大约一个小时并撞到了一堵砖墙.我使用float属性设置布局,或者看起来如此.问题是我如何让图像div动态改变,并根据图像的大小让文本div的大小上升或下降？有没有办法为图像大小设置上限？我希望看到图像不超过div的50%左右,这样大量的图像不会使所有东西都不成比例地扭曲.

任何帮助是极大的赞赏!

PS为任何代码格式问题道歉.我仍然试图在这方面弄清楚一切.

Answer 1

添加到您的 CSS

#article_media img { max-height:50%; }

或者如果你想要包含 div 本身

#article_media { max-height:50%; }