CSSを使用した画像のサイズ変更とトリミング

Question

私は、表示する画像が一揃い、解像度とアスペクト比が異なるサイトがあります。画像を一定の解像度にリサイズしてトリミングする簡単な方法はありますか？私の目的では、サイズ変更された画像を280x280にします。

もちろん、私はちょうど<img height = '280' width = '280' />を設定することができますが、これはストレッチします。私はそれを2つの解像度のうちの小さい方にしたい、正方形にして中央のピクセルを取る。たとえば、解像度が480x200の場合、イメージの中央から200x200のセクションを取り出す必要があります。

私はGoogle検索を試みましたが、役に立たなかった。

Answer 1

cssで画像の「実際の作物」は不可能です。リアルクロップとは、イメージが新しい値に縮小され、そのサイズがそれ以前より小さくなったことを意味します。

しかし、負のマージンや絶対的な配置を持つソリューションがあり、多くのお手伝いをします。私はこのテクニックを何度も使ってきました。

を見てみてください：あなたはCSSであなたのウェブサイト上のすべての画像のサイズを設定することができ Cropping images with CSS

Answer 2

を：

img { 
    width: 280px; 
    height: 280px; 
} 

問題は、一部の画像が原因で彼らのの奇妙に見えるだろうということであり、アスペクトラジオ。 をアップロードするときは、の各画像（サムネイルとしてよく知られています）のサイズを変えることをお勧めします。実行時にNoot、それは時間がかかるだろう。

Answer 3

イメージをCSSの背景として設定する場合は、background-size: cover|containを使用できます。

Answer 4

要素をトリミングするクリッププロパティを使用できます。

私は数週間前にCodrops：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/でチュートリアルを書いています。

Answer 5

私は最近、この同じ問題を実際に遭遇し、背景画像のやり方とやや異なるアプローチで終わりました。もう1つの主な違いは、自分のやり方が画像の幅と高さを認識していないと仮定しているため、どの画像でも動的に機能します。しかし、画像の方向を決定するためには、jQueryのほんの少しが必要です（私は確かにJSを代わりに使用することができます）。

HTML：：

<ul class="cropped-images"> 
    <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li> 
    <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li> 
</ul> 

CSS：

li { 
    width: 150px; // Or whatever you want. 
    height: 150px; // Or whatever you want. 
    overflow: hidden; 
    margin: 10px; 
    display: inline-block; 
    vertical-align: top; 
} 
li img { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 
li img.landscape { 
    max-width: none; 
    max-height: 100%; 
} 

jQueryの：あなたはもっと、について説明に興味があるが、コードは非常に単純である場合

私は blog post about itを書いた

$(document).ready(function() { 

    $('.cropped-images img').each(function() { 
     if ($(this).width() > $(this).height()) { 
     $(this).addClass('landscape');   
     } 
    }); 

});