[解決済み】CSSで長方形の画像を正方形に「切り抜く」方法は？

質問

CSSで画像を実際に修正することは不可能であることは承知していますし、だからこそcropを引用符で囲んでいます。

私がやりたいのは、長方形の画像を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 }

EDIT: 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 }

これはレスポンシブにも対応できるように、例えば幅や高さを%で変更することもできることに注意してください。