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

Posted 2023-03-05

【中文标题】将img放入div容器中[关闭]

【英文标题】：Fit img in div container [closed]

【发布时间】：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：那些花时间阅读的人已经理解了这个问题，提出了一个很好的答案并给出了答案。关闭它的决定很难理解。

【参考方案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/cs-s-ref/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);
        
            

);