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

Question

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

看这里http://didi.url.ph/design (用猫点击第一个方 block ):)

现在我有:

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

制作方法:图像的最大宽度 - 胶带的宽度，最大高度 - 屏幕的高度。

so should be

它不起作用:

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

因为图像被不成比例地拉伸(stretch)了。

有什么想法吗？

Answer 1

你可以这样做:

CSS

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