web-dev-qa-db-ja.com

CSSスケールと正方形の中央のトリミング画像

そのため、アプリにはサムネイルのコレクションがあり、サイズは200x2です。元の画像にこの比率がない場合があるため、この画像を正方形にトリミングすることを計画しています。

現在、サムネイルに収まるように画像をストレッチするだけなので、元の画像サイズが400x8であるとすると、画像は非常につぶれたように見えます。最短の幅/高さで見えるようにこの画像をトリミングしてから正方形にトリミングしたいので、上の例では400x4にトリミングされます。

CSSを使用して簡単にこれを行う方法はありますか、それとも何らかのJSを使用してこれを行う必要がありますか？

javascriptjqueryhtmlcssimage
29
adit

Background-imageを使用すると、CSSでこれを簡単に行うことができます。

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

このフィドルでは、最初の画像は400x800、2番目の画像は800x400です。

http://jsfiddle.net/samliew/tx7sf

49
Samuel Liew

画像の幅が高さよりも大きい場合を処理するために更新されました。

純粋なCSSでこれを行うことができます。各画像のコンテナ要素を固定の高さと幅、overflow: hiddenに設定します。次に、min-width: 100%、min-height: 100%を持つように画像を設定します。余分な高さや幅があると、コンテナからあふれて非表示になります。

[〜＃〜] html [〜＃〜]

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

[〜＃〜] css [〜＃〜]

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

http://jsfiddle.net/thefrontender/XZP9U/5/ をご覧ください

9
thefrontender

私は自分の解決策を思いつき、他の誰かがこのスレッドを見つけた場合に備えて、ここでそれを共有すると思いました。 background-size：coverソリューションは最も簡単ですが、IE7でも機能するものが必要でした。 jQueryとCSSを使用して思いついたものを次に示します。

注：私の画像は「プロファイル」画像であり、正方形にトリミングする必要がありました。したがって、いくつかの関数名。

jQuery：

cropProfileImage = function(pic){
    var h = $(pic).height(),
        w = $(pic).width();

    if($(pic).parent('.profile-image-wrap').length === 0){
                     // wrap the image in a "cropping" div
         $(pic).wrap('<div class="profile-image-wrap"></div>');
    }

      if(h > w ){
          // pic is portrait
          $(pic).addClass('portrait');
          var m = -(((h/w) * 100)-100)/2; //math the negative margin
          $(pic).css('margin-top', m + '%');    
      }else if(w > h){ 
          // pic is landscape
          $(pic).addClass('landscape'); 
          var m = -(((w/h) * 100)-100)/2;  //math the negative margin
          $(pic).css('margin-left', m + '%');
      }else {
        // pic is square
        $(pic).addClass('square');
      }
 }

// Call the function for the images you want to crop
cropProfileImage('img.profile-image');

[〜＃〜] css [〜＃〜]

.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */

.profile-image-wrap { 
      /* whatever the dimensions you want the "cropped" image to be */
      height: 8em;
      width: 8em;
      overflow: hidden; 
 }

.profile-image-wrap img.square {
      visibility: visible;
      width: 100%;  
 }

 .profile-image-wrap img.portrait {
      visibility: visible;
      width: 100%;
      height: auto;
 }

 .profile-image-wrap img.landscape {
      visibility: visible;
      height: 100%;
      width: auto;
 }
1
Barry T. Smith