图像宽度和高度没有拉伸或溢出

Question

我试图获得一个未知高度和宽度的图像，以适应宽度为300像素，高度为300像素的div内部。我总是需要看到整个图像。

示例1 ：带有 300px高度和 200px宽度的图像，将导致 100％高度和 66％宽度它的父div

示例2 ：带有 200px高度和 300px宽度的图像，将导致 66％高度和 100％宽度它的父div

Answer 1

如果您将图像设置为div的背景图像，则可以使用css样式

background-size: contain;

这是一个jsfiddle！ http://jsfiddle.net/04y4dm06/1/

Answer 2

我不确定是否这样，但我认为你可以用jQuery问它：

if($('incoming_pic').css('height') > '300px'){
  //do something
}

Answer 3

.your_block img {
    max-width: 100%;
    max-height: 100%;
}