0

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

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

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

4

5 回答 5

5

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

演示

img {
   max-width: 100%;
   max-height: 100%;
}
/* This will resize you image according to the container size and 
   will retain the aspect ratio too */
于 2012-12-25T13:45:33.207 回答
3

对于任何感兴趣的人，这是实际的工作解决方案：

JSFiddle 演示

和实际代码：

(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：非常感谢您为我指明了正确的方向。

于 2012-12-25T16:14:39.923 回答
2

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

于 2012-12-25T14:40:41.893 回答
0

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

于 2012-12-25T14:00:11.827 回答
0

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

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);
        }
    }        
}
});
于 2012-12-25T16:32:42.683 回答