Jquery 图像垂直拟合

我使用Oliver Boermans的jQuery插件将图像装配到一个具有100%宽度和高度的容器中（实际上是视口）

插件的核心是这个

$(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

属性包含图像的实际像素尺寸

现在，当图像比视口宽时，这绝对可以完美地工作。但是，我发现，当视口垂直比图像短时，它无法将图像垂直放入视口中

我如何修改这个插件，使其除了考虑水平外还考虑垂直拟合，以便无论视口的尺寸和纵横比如何，图像的每一寸都始终完全显示出来

我准备了一把小提琴来演奏；-调整结果分区的大小以查看正在运行的插件。如果将高度设置为比拟合图像短，则图像的上边缘和下边缘将被剪切

编辑：所以在一些混乱之后，我想澄清一下；我想按比例将图像放入容器中。所有图像都需要始终可见，但决不能大于其原始尺寸。我在下面看到了它。我为此提供的jQuery插件适用于水平拟合（示例A和C），但不适用于垂直拟合（示例B）。这就是我想要解决的问题

---

EDIT2:在进一步的混乱之后，我甚至制作了一个动画，详细描述了我希望它的行为

纵横比重要吗？查看此仅CSS的解决方案：

单击“放大外部div”链接以查看图像展开以填充

代码如下：

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

---

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

可能不完全是您想要的，但我已经制作了一个始终显示全屏图像，但仍具有纵横比的容器，否则图像可能看起来非常扭曲：

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

---

“最大宽度”和“最大高度”难道不能满足您的需求吗？将“最大宽度”和“最大高度”设置为容器大小，并且应将其限制为容器大小，但浏览器将保留纵横比

Html:

---

签出。

更改

一个功能对我来说很有效：

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

变成：

newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth;

newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight;

及

变成：

newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth;

newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight;

这些更改应确保图像不会扩展到大于其实际尺寸。
我突然想到，您很可能正在执行以下操作：事实上，不是。我希望始终显示图像的每个像素。与其说它是一个背景，不如说它是一个应该以最大分辨率显示的内容图像，如果视口太小而无法完全显示，则按比例将其缩小到适合的最大尺寸。哦，所以您只希望图像按比例适配视口……是的，但决不能大于其原始比例。对于这一点，Oliver的插件是完美的，除了当视口的宽度大于高度时，它不会调整图像的高度。通过可视化查看更新的问题：）我想这是最接近的，但我要查找的始终是确保显示所有图像，如果视口的纵横比与图像的纵横比不匹配，则“字母装箱”，而且永远不会超过它的原始尺寸。这与直接在图像本身中设置高度和宽度似乎没有太大区别。我需要的是按比例调整图像大小，以适合而不是覆盖其容器。我不知道有任何纯CSS解决方案可以实现这一点。这绝对是最接近的！但是，我注意到，如果父级
div
大于图像的原始尺寸，则图像的高度会被不适当地拉伸。如果图像小于周围的
div
，则只需将其居中即可（如Flash动画所示）；在您的解决方案中如何实现这一点？
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;