使用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;
}