使用CSS显示水平和垂直图像

Question

我有一个固定宽度的磁带图像。水平显示良好（磁带的宽度），但垂直不适合整个屏幕。

看这里http://didi.url.ph/design（点击第一个块与猫）:)

现在我有：

#ajaxcontent .field-item img { 
     height: auto; 
     width: 100%; 
    } 

如何使： 图像的最大宽度 - 磁带的宽度， 最大高度 - 屏幕的高度。

so should be

它不工作：

#ajaxcontent .field-item img { 
     max-width: 100%; 
     max-height: 80vh; 
    } 

由于图像被拉伸不成比例。

有什么想法吗？

Answer 1

你可以这样做：

CSS

#ajaxcontent { 
    background: #ffffff none repeat scroll 0 0; 
    height: 90vh; 
    margin: 40px auto; 
    overflow: auto; 
    position: relative; 
}