CSSを使用して実際に画像を変更することは不可能であることを知っています。そのため、作物を引用符で囲みました。

私がしたいのは、長方形の画像を取得し、CSSを使用して画像をまったく歪ませることなく正方形に見せることです。

私は基本的にこれを有効にしたいと思います：

これに：

それらがIMGタグにある必要はないと仮定します...

HTML：

<div class="thumb1">
</div>

CSS：

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

編集：divがどこかにリンクする必要がある場合は、HTMLとスタイルを次のように調整してください：

HTML：

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS：

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

これは、幅と高さなどの応答性を高めるために変更することもできます。

ラッパーdivやその他の役に立たないコードのない純粋なCSSソリューション：

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

1. 画像をdivに配置します。
2. divに明示的な正方形の寸法を指定します。
3. divのCSSオーバーフロープロパティを非表示（overflow:hidden）に設定します。
4. あなたの想像力をdivの中に入れてください。
5. 利益。

例えば：

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

background-size：coverの使用-http : //codepen.io/anon/pen/RNyKzB

CSS：

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

マークアップ：

<div class="image-container"></div>

私は実際にこの同じ問題に最近遭遇し、わずかに異なるアプローチになりました（背景画像を使用できませんでした）。ただし、画像の向きを決定するには、ほんの少しの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：

$( document ).ready(function() {

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

});

画像がレスポンシブ幅のコンテナにある場合：

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

同様の問題があり、背景画像を「妥協」できませんでした。これを思いついた。

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

お役に立てれば！

例：https : //jsfiddle.net/cfbuwxmr/1/

CSSを使用：オーバーフロー：

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

正方形の寸法のdivを使用し、内部に.testimgクラスの画像を含めます。

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

または、画像の背景を持つ正方形のdiv。

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

ここにいくつかの例があります：http : //jsfiddle.net/QqCLC/1/

画像センターを更新しました

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

object-fit: cover あなたが必要とするものを正確に行います。

ただし、IE / Edgeでは機能しない場合があります。以下に示すように、CSSだけで修正してすべてのブラウザで機能するようにしてください。

私が取ったアプローチはして容器内の画像を配置した 絶対、その後、中央で右のそれを置くの組み合わせを使用しました：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

それが中央に来たら、私はイメージに与えます、

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

これにより、画像はObject-fit：coverの効果を得ます。

上記のロジックのデモを以下に示します。

https://jsfiddle.net/furqan_694/s3xLe1gp/

このロジックはすべてのブラウザで機能します。

元の画像

垂直方向にトリミング

水平方向にトリミング