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

Dynamic scale down images while maintaining proportion

本文关键字：缩小 图像 动态      更新时间：2024-01-20

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

我当前的图像大小调整尝试如下：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>

这是更新的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
}

这完美地说明了我在没有javascript的情况下所做的一切！

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

对于其他人来说，在同样的事情之后，我修改后的代码会是这样的：

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

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

像这样的东西：

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