javascript - 在保持比例的同时动态缩小图像

Question

我正在尝试动态缩小可变的纵向和横向图像以按比例适合浏览器窗口。

我当前的图像调整大小尝试在这里:http://jsfiddle.net/6pnCH/4/

我需要在浏览器加载时已经垂直缩放的图像。

目前我只有在触发 onBrowserResize 时才开始缩放。

此外，图像似乎在调整大小时发生拉伸(stretch)和变形，我需要使它们保持比例。

很确定 Javascript 是解决这个问题的关键，但我对它的了解相当有限，因此非常感谢任何帮助。

Javascript 代码:

$(window).resize(function(){
  $('.slide img').css({
    maxHeight: $('.slide').height() * 0.8,
    maxWidth: $('.slide').width() * 0.8
  });
});

CSS 代码:

#slide {
    text-align: center;
    background-color: green;
    height: 100%;
    width: 100%;
    display: inline-block;
    }

.slide {
    vertical-align: middle; 
    display: table-cell;
}

.slide:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle
}

.slide img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
} 

HTML 代码:

<div id="slide" class="slide"><img src="image.jpg"></div>

Answer 1

这是更新的 Fiddle

这次你不需要使用Javascript。

你不想拉伸(stretch) img 所以不要使用应用于它的宽度和高度，看。

只有 CSS 仍然可以做到这一点:

#slide {
    text-align: center;
    background-color: green;
    height: 100%;
    width: 100%;
    display: inline-block;
    }

.slide {
    vertical-align: middle; 
    display: table-cell;
}

.slide:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    vertical-align: middle
}

.slide img {
    vertical-align: middle;
    max-width: 100%;
    background-color: blue;
    padding: 10%; //here is the trick
}