Question

使用CSS2＆amp; amp;模拟即将推出的CSS3对象适合属性的最佳方法是什么？ JS？我对包含＆amp ;;感兴趣涵盖拟合方法。

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

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

Answer 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 */

Answer 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：非常感谢我指出了正确的方向。

Answer 3

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

Answer 4

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

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

适合img in div容器

5 个答案: