将img放入div容器中[关闭]答案

【问题标题】：Fit img in div container [closed]将img放入div容器中[关闭]
【发布时间】：2012-12-11 10:54:53
【问题描述】：

使用 CSS2 和 JS 模拟即将推出的 CSS3 对象匹配属性的最佳方法是什么？我对包含和覆盖拟合的方法很感兴趣。

编辑：在 CSS3 中，这里描述了新的对象适配机制：http://dev.opera.com/articles/view/css3-object-fit-object-position/，但在 Opera 浏览器之外尚不支持对象适配。要创建一个可移植的解决方案，我需要使 img 增长或缩小到其父 div 的大小，而不会丢失图像的原始纵横比。这可以通过包含整个图像（技术也称为信箱）或通过放大和溢出图像直到最小尺寸与div 的尺寸匹配（技术也称为封面）来实现。那里有一些 jquery imagefit 库，它们非常有问题（也许它们只在特定浏览器的特定情况下工作）。

编辑2：那些花时间阅读的人已经理解了这个问题，提出了一个很好的答案并给出了答案。关闭它的决定很难理解。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

为什么要使用 JavaScript 或 CSS3 的东西？只需使用它就可以了

Demo

img {
   max-width: 100%;
   max-height: 100%;
}
/* This will resize you image according to the container size and 
   will retain the aspect ratio too */

【讨论】：

不确定为什么投反对票.. 这是一个不错的解决方案。唯一的问题是它不会超出图像的原始大小
@dakdad ya 但它是Fit img in div container 否则他可以简单地使用background-size: cover;
投反对票，因为它没有回答问题。
但是你的问题是这个Fit img in div container，如果你仍然需要一个完整的页面背景，看看这个，css-tricks.com/perfect-full-page-background-image，这仍然不是你要找的东西，很抱歉没有人可能理解你的问题.. .
我不是来争辩的，如果你这么认为，我会去妈妈......你可以等待你的回答

【解决方案2】：

对于任何感兴趣的人，这里是实际可行的解决方案：

JSFiddle Demo

和实际代码：

(function($) {
  $.fn.imagefit = function(contain) {
    this.each( function() {
      var $this           = $(this),
          $wrapper        = $this.parent(),
          wrapper_width   = $wrapper.width(),
          wrapper_height  = $wrapper.height(),
          wrapper_ratio,
          image_ratio;


        // ratios
      image_ratio   = $this.width() / $this.height();
      wrapper_ratio = wrapper_width / wrapper_height;

      var ratio_cond = wrapper_ratio > image_ratio;
        if(contain) {
            ratio_cond = !ratio_cond;
        }

      if ( ratio_cond ) {
          $wrapper.css({
            'background'  : 'url('+$this.get(0).src+')',
            'background-size'  : '100% auto',
            'background-position'  : '0px 50%',
            'background-repeat'  : 'no-repeat'
          });
      } else {
          $wrapper.css({
            'background'  : 'url('+$this.get(0).src+')',
            'background-size'  : 'auto 100%',
            'background-position'  : '50% 0px',
            'background-repeat'  : 'no-repeat'
          });
      }

      $this.remove();

    });
    return this;
  };

  $('div.bgthumb#cover > img').imagefit(false);               
  $('div.bgthumb#contain > img').imagefit(true);               

}(jQuery));

@Hippocrates：非常感谢您为我指明了正确的方向。

【讨论】：

您也可以使用ratio_cond 在包装元素上设置一个类，然后相应地应用样式：width: 100%; height: auto; 或其他方式并以top: 50%; left: 50%; transform: translate(-50%, -50%); 之类的方式居中。
我使用了您的解决方案并对其进行了一些改进以回答similar question。

【解决方案3】：

如果您将图像设置为容器的背景，您将获得一个方便的 CSS 属性：background-size。值可以在这里看到：http://www.w3schools.com/cssref/css3_pr_background-size.asp

【讨论】：

您的回答似乎得出了正确的结果：jsfiddle.net/ZxjrV/2，我也会在 JS 准备好后发布。
这确实让我得到了正确的结果。谢谢！

【解决方案4】：

如果你需要一个跨浏览器的可拉伸背景解决方案——也许可以使用一些插件，比如： http://srobbin.com/jquery-plugins/backstretch/

【讨论】：

【解决方案5】：

这是另一种方式 - 不使用背景图片。（注意，现阶段我还没有担心定位）

http://jsfiddle.net/Z5Hb8/2/

$('.resize').each(function(){
var el = $(this).find('img'),
    pael = el.parent(),
    ph = pael.height(),
    pw = pael.width(),
    pr = pw/ph,
    img = new Image();

img.src = el.attr('src');
img.onload = function() {
    var w = this.width,
        h = this.height,
        sr = w/h;

    if (pael.hasClass('cover')) {
        if (pr > sr) {
            el.width(pw);   
        } else {
            el.height(ph);
        }
    } else if (pael.hasClass('contain')) {
        if (sr > pr) {
           el.width(pw);
        } else {
           el.height(ph);
        }
    }        
}
});

【讨论】：