Imagefit 垂直

Question

我正在使用 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/ - 调整 Result 分区的大小以查看插件的运行情况。如果您将高度设置为比拟合图像短，则图像的顶部和底部边缘会被剪切。

编辑：所以经过一番困惑，我想澄清一下；我想按比例 fit 容器内的图像。所有图像都需要始终可见，但不能大于其原始尺寸。我在下面形象化了它。我为此使用的 jQuery 插件适用于水平拟合（示例 A 和 C），但它不适合垂直拟合（示例 B）。这就是我要解决的问题。

EDIT2：经过进一步的混淆，我什至制作了一个动画来详细说明我希望它的行为方式； http://www.swfme.com/view/1064342

Answer 1

更改 one 函数对我有用：

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;

这些更改应确保图像不会扩展至大于其实际尺寸。

Answer 2

也许不是你要找的，但我整理了一个variant，它始终显示全屏图像，但仍然具有纵横比，否则图像可能看起来很失真：

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"));
  });
});

Answer 3

长宽比重要吗？查看这个纯 CSS 解决方案：http://jsfiddle.net/Sdush/

点击“放大外部 div”链接查看图片展开填充。

代码如下：

<div id="out">
  <img id="expand" src="someImage.jpg" />
</div>

... 和 CSS：

#out{width:800px;height:600px;}
#expand{width:100%;height:100%;}

但同样，这不考虑图像的纵横比，并且需要容器的可识别宽度。

Answer 4

不会 max-width 和 max-height 给你你想要的吗？将最大宽度和最大高度设置为容器大小，并应限制为容器大小，但纵横比将由浏览器保持。

HTML：

<img id="testimg" src="https://www.google.co.il/images/srpr/logo3w.png"/>

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);

查看this fiddle。