1

我正在使用 Oliver Boermans 的 jQuery 插件将图像放入具有 100% 宽度和高度的容器中（因此，本质上是视口）；http://www.olicle.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 分区的大小以查看插件的运行情况。如果将高度设置为比拟合图像短，则图像的顶部和底部边缘会被剪切。

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

例子

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

4

4 回答 4

2

更改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;

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

于 2013-01-20T10:16:57.390 回答
1

也许不完全是您正在寻找的东西，但我整理了一个始终显示全屏图像但仍然具有纵横比的变体，否则图像可能看起来很失真：

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"));
  });
});
于 2013-01-14T07:19:47.753 回答
0

长宽比重要吗？查看这个纯 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%;}

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

于 2013-01-14T06:50:19.530 回答
0

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

看看这个小提琴。

于 2013-01-19T20:21:45.393 回答