Imagefit垂直
我正在使用Oliver Boermans的jQuery插件将图像装入100％宽度和高度的容器中（基本上是视口）; http://www.ollicle.com/eg/jquery/imagefit/
这个插件的肉是这个;
$(img) .width('100%').each(function() { $(this).height(Math.round( $(this).attr('startheight')*(dim.outerWidth/$(this).attr('startwidth'))) ); }) .css({marginTop: Math.round( ($(window).height() - $(img).height()) / 2 )}); startwidth和startheight属性包含图像的实际像素尺寸。
现在，当图像比视口宽时，这种方法非常完美。 但是，我发现当视口垂直比图像短时，它不会使图像垂直适合视口。
除了水平之外，如何修改此插件以将垂直拟合考虑在内，这样无论视口的尺寸和纵横比如何，图像的每一寸都始终完全显示？
我准备了一个小提琴玩; http://jsfiddle.net/NXJCd/ – 调整结果分区的大小以查看插件的运行情况。 如果将高度设置为比拟合图像短，则会切割图像的顶部和底部边缘。
编辑：所以经过一些混乱，我想澄清; 我想按比例适合容器内的图像。 所有图像都需要始终可见，但不得大于其原始尺寸。 我在下面看到了它。 我用的jQuery插件适用于水平拟合（例A和C），但它不适合垂直（例B）。 这就是我想要解决的问题。
EDIT2：经过进一步的混乱之后，我甚至制作了一个动画，详细描述了我希望它如何表现; http://www.swfme.com/view/1064342
改变onefunction对我有用：
one : function(img){ var parentDim = $(img).parent().getHiddenDimensions(); var heightWidthRatio = $(img).attr('startheight') / $(img).attr('startwidth'); var newWidth, newHeight; //Width > height. if(heightWidthRatio < 1) { newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth; newHeight = Math.round(newWidth * heightWidthRatio); if(newHeight > parentDim.outerHeight) { newHeight = parentDim.outerHeight; newWidth = Math.round(newHeight / heightWidthRatio); } } //Height >= width. else { newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight; newWidth = Math.round(newHeight / heightWidthRatio); if(newWidth > parentDim.outerWidth) { newWidth = parentDim.outerWidth; newHeight = Math.round(newWidth * heightWidthRatio); } } $(img).width(newWidth).height(newHeight) .css({marginTop: Math.round(($(window).height() - $(img).height()) / 2 )}); }
请注意，这会使用父div的大小 – 因为CSS中的图像大小设置为100％，这意味着初始图像尺寸大于包含div，这可能会在第一次调用函数时导致问题。
编辑：
我已经更新了上面的代码，但更改是：
newWidth = parentDim.outerWidth;
变为：
newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth;
和
newHeight = parentDim.outerHeight;
变为：
newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight;
这些更改应确保图像不会扩展到大于实际尺寸。
也许不完全是你想要的，但我已经把一个变体总是显示一个全屏图像，但仍然有宽高比，否则图像可能看起来很扭曲：
function optSizeImage( selector ) { var obj; if(typeof selector === 'undefined' || !selector) { selector = '.visual img, .gallery-box img'; } obj = ( typeof ( selector ) == 'string' ) ? $( selector ) : selector; function resizeImg() { var imgwidth = obj.width(), imgheight = obj.height(), winwidth = $(window).width(), winheight = $(window).height(), widthratio = winwidth / imgwidth, heightratio = winheight / imgheight, widthdiff = heightratio * imgwidth, heightdiff = widthratio * imgheight; if(heightdiff>winheight) { obj.css({ width: winwidth+'px', height: heightdiff+'px' }); } else { obj.css({ width: widthdiff+'px', height: winheight+'px' }); } } resizeImg(); }; $(document).ready(function(){ optSizeImage($("img")); $(window).bind('resize',function(){ optSizeImage($("img")); }); });
宽高比是否重要？ 看看这个仅限CSS的解决方案： http ： //jsfiddle.net/Sdush/
单击“放大外部div”链接以查看图像展开以填充。
这是代码：
……和CSS：
#out{width:800px;height:600px;} #expand{width:100%;height:100%;}
但同样，这不尊重图像的纵横比，并且需要容器的可辨别宽度。
最大宽度和最大高度不会给你你想要的吗？ 将最大宽度和最大高度设置为容器大小，它应限制为容器大小，但纵横比将由浏览器保留。
HTML：
JS代码：
i = -25; function resizeme() { var theimg = $("#testimg"); i++; $(theimg).css("max-width", 275 + (i * 5)); $(theimg).css("max-height", 95 + (i * 2)); } setInterval(function () {resizeme();}, 500);
看看这个小提琴 。