0

CSS2 & JS を使用して今後の CSS3 object-fit プロパティをシミュレートする最良の方法は何ですか? フィッティングのための包含とカバーの方法に興味があります。

編集: 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 に答える