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

すごくマイナーな話ですが、ちょっと困ったのでエントリーしておきます。

CSS3のborder-radiusは手軽に装飾ができて便利なのですが、IE8以下は対応していません。
そこで「border-radius.htc」というプラグインを使って対応するケースがあります。

これを使うとIE系でも角丸が再現可能なのですが、IE8だと背景が真っ黒になる場合があります。
HTML構造やCSSの状況によって発生したりしなかったりなので、細かい原因は追求してませんが、発生すると結構困ります。

という事で、シンプルな対応方法を書いておきます。

「CSSで背景（background-color）を指定する」

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

behavior: url(/css/border-radius.htc);

background-color: #fff;

実にシンプルですが、簡単に対応できます。
CSS3関連のプロパティは、適用されなくても問題無いデザインにしておく。
つまり諦める、というのがスマートですけどね。