圖片等比縮放

目的

讓圖片在一個box內

方法

[方法一]

css:

.row{
    float:none;
    clear:both;
}
.box {
    height: 125px;
    width: 125px;
/*    display: table-cell;    */    
    text-align: center;
    vertical-align: middle;

    border: 1px solid #EFEFEF;
    margin: 0 auto;
    *padding: 5px;
    background-color:#CCC;    
    float:left;
}
.box_h {
    border: 1px solid #EFEFEF;
/*    display: table-cell;    */
    margin: 0 auto;
    height: 125px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    width: 220px;
}
.box img ,
.box_h img 
{
    max-height: 100%; 
    max-width: 100%; 
    vertical-align: middle;
}
.lat_top img{
        float:left;
        width:467px;
        height:250px;
        border-right: solid 1px #000;
}
.article_picbox{
        width:300px;
        height:300px;
        display : table-cell;
        position:absolute;
        text-align :center;
        vertical-align  :middle;        
        background-color:#CCC;
        *padding: expression( (this.height - 165)/2 + "px");        
}
.article_picbox img{
        vertical-align:middle;
        max-width:238px;
        max-height:165px;
        width:expression(this.width > 238 && this.height <= this.width ? 238:true);
        height:expression(this.height > 165 && this.width <= this.height ? 165:true);
        padding: expression( (this.height - 165) > 2 ? 100 + "px" : 10 + "px");    
}

html:

<div class="row">
    <h2>Case 2</h2>
    <div class="box">
        <img src="./grandmom.jpg" />
    </div>
</div>
<div class="row">
    <h2>Case 1</h2>
    <div class="article_picbox">
        <img src="./grandmom.jpg" />
    </div>
</div>
<div class="article_picbox">
    <img src="./grandmom.jpg" />
</div>