如何在div中拟合图像，图像大小是max then div还是min then div

Question

如何在div中适合图像？图像大小可以是最大然后div或最小然后div。

html代码

<div class="main">
  <img scr="image.jpg">
</div>

CSS代码

.main{
  height:200px;
  width:200px;
}

img{
  // answer code
}

如何使用以下设置图像css：

1. 图像高度100和宽度100
2. 图像高度300和宽度300

Answer 1

如果你的图像总是正方形的，那么只需添加img{宽度：200px；高度：200px；}

如果没有，那么

.main {
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
img {
    max-width: 200px;
    max-height: 200px;
    /* IE7 doesn't support display: table-cell property? so hack */
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');     }

在这里查看http://jsfiddle.net/qBDT4/1/

Answer 2

在元素子元素“height:inherit而这些元素将与搭档的高度相同。

.main{
       height:200px;
       width:200px;
}

.img{
  height: inherit; //the imagem will be heigth 200px automatic
}

Answer 3

您可以使用：

img { max-width: 100%; height: auto; } // This would help you to automatically fit the image.

上面的css代码将帮助您处理大小大于div的图像。但不适用于小于div的图像。要实现您的目标，需要一点jQuery，请在下面找到它：

$(document).ready(function(){
    imageWidth = $('.main img').width();
    parentWidth = $('.main').width();
    if (imageWidth > parentWidth) {
        $('.main img').css('width', '100%');
    }
});

当图像小于div时，它会根据您的要求调整自身大小并适合div。

因此，放置css和脚本以满足这两种条件。