Question

我正在尝试动态缩小变量纵向和横向图像，使其按比例适合浏览器窗口。

我当前的图片大小调整尝试位于：http://jsfiddle.net/6pnCH/4/

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

目前我只有在onBrowserResize被解雇时才开始缩放。

此外，图像似乎在调整大小时会拉伸和变形，我需要保持它们的比例。

非常确定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。

你不想拉伸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
}

Answer 2

如果您使用css3 background-size: cover或background-size:contain？

，那该怎么办？

类似的东西：

<div style="width:100%; height:100%; background-size:cover; background-image:url(YOUR_IMAGE.jpg);"></div>

Answer 3

这完全说明了我毕竟没有使用javascript后所做的事情！

http://codepen.io/jasonbradberry/pen/sHJhl

对于其他人在同样的事情后，我的修改后的代码看起来像这样：

.slide img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    width: auto;
}

动态缩小图像，同时保持比例

3 个答案: