CMS（WordPress）などの技術ブログ

画像をアップしてWebサイトに表示する場合、
普通はきちんと目的のサイズに加工してからアップすると思います。
特に同じ画像が並ぶような使い方の場合は揃ってないと変ですからね。

サイズがちょっと合わない画像が混ざってたり、
いちいち加工する暇がない場合もあるでしょう。

そんな時CSS側（もしくはHTML側）で下記のように切り抜けるのが定番です。

(1) 画像のwidthやheightを指定して拡大・縮小する。

<img src="" alt="" style="width: 200px; height: 100px;" />

縦横比が変わると困る場合がある場合（ほとんどそうだと思いますが）は次の方法。

(2) 画像の縦横比を維持したい場合は、widthかheightをどちらか指定して拡大・縮小する。

<img src="" alt="" style="width: 200px;" />

でも、縦横比は維持したいけど、画像の枠の大きさが決まってる場合はどうしたら良いでしょうか。
そこで次の方法。

(3) CSSで画像を切り抜く

ある程度まで縦横比を維持したまま縮小して、
はみ出た部分は切ってしまうという事です。
下記のように実装します。
これで幅200px、縦100pxをはみ出た部分はカットされます。

<div class="photo">
	<img src="" alt="" />
</div>

div.photo {
	width: 200px;
	position: relative;
}
div.photo img {
	width: 200px;
	position: absolute;
	clip: rect(0px 200px 100px 0px);
}

きちんとWebサイトを運営する場合は、画像を加工するのが当然かつ唯一の方法ですが、
そのへんは緩くて構わないよという場合、上記の方法で切り抜け可能です。