CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

  • あとで読みたい人は…

@cappeeです。

特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。

例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。

トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。

CSSだけで画像をトリミングする方法

overflow: hidden を使う

一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。
trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してください。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="60"></p>

CSS

.trimming {
 width: 60px;
 height: 60px;
 overflow: hidden;
 }

元の画像が複数ありサイズが固定でない場合

横長と縦長の画像が混在していて、なるべく画像全体が見えるように縮小する場合は、HTMLの記述もかえる必要があります。横長なら下記と同じく width を指定し、 縦長なら height を指定します。

この方法だと横長の画像だった場合は右側が切り取られ、縦長の画像だと下が切り取られますので、画像を中央配置してトリミングすることはできません。

横長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

横長の画像デモ(画像の右を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

縦長の画像デモ(画像の下を切り取る)

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

画像サイズが固定の場合

画像サイズが固定の場合の場合は、position を使用してセンタリングすることもできます。
枠が60px、画像が100×80pxだった場合、imgタグの top は【(画像の高さ-枠の高さ)/2】 を指定し、
left は【(画像の幅-枠の幅)/2】 を指定します。

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
width: 60px;
height: 60px;
overflow: hidden;
}
. img{
position:absolute;
top:-10px;
left:-20px;
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

センタリングのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipプロパティを使う

要素の切り抜き領域を指定するclipプロパティでも画像の切り抜きが可能です。下記のように少しややこしいですが、clip: rect(上 右 下 左); と余白の長さを指定します。そのため、使用する画像が複数ある場合は、画像サイズが固定されている必要があります。

clip1 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

また、一緒に position: absolute; または position: fixed; を記述する必要があるため、

HTML

<p class="trimming"><img src="/image/user.jpg" alt="ユーザー名" width="100" height="80"  class="img"></p>

CSS

.trimming {
position:relative;
height: 80px;
}
. img{
position:absolute;
clip: rect(10px 80px 70px 20px);
}

元の画像

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

clipのデモ

 CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

完全に切り抜くには

デモを見ていただくとわかるかと思いますが、clipプロパティのみだと指定した余白がそのまま表示され”切り抜いた”とは言えない状態です。切り抜くには上記 overflow: hidden の「画像サイズが固定の場合」と同じ指定をする必要があります。勘の良い人はもうお分かりかもしれませんが、結局上記と同じ記述をするのであれば、わざわざclipプロパティを指定してコードを増やす必要がないんです。でも、こんなclipプロパティがCSS2から実装されていたんですね。私は今回調べて初めて知りました。完全に切り抜くか余白を残すかの指定までできると素敵なんですけどね。こんなプロパティあったんだ!と少し感動したのでご紹介しました。長々とすみません。

background で背景画像にする

システム案件の場合はCSSの方で背景画像として表示するのはちょっと考えますが、画像置換でも問題ない場合はこれが一番ラクかもしれませんね。これならセンタリングも簡単です。

HTML

<p class="trimming">ユーザー名</p>

CSS

.trimming {
 width: 60px;
 height: 0;
 padding-top: 60px;
 line-height: 60px;
 background: url("/image/user.jpg") no-repeat 50% 50%;
 overflow: hidden;
 }

jQueryを使う方法

面倒な計算をせずにjQueryとCSSだけでセンタリングさせた画像を切り抜くこともできます。もちろん複数画像がある場合、それぞれサイズが異なっても大丈夫ですので、JavaScriptを導入しても問題ない場合はこの方法が手っ取り早いです。

こちらのサイトで詳しい導入方法が記述されていますが、そちらを引用して記載したいと思います。

画像編集いらず!jQueryとCSSだけで画像をトリミング&センタリングする

[2013.2.28追記]
画像が表示枠よりも小さい場合は表示枠の中央に表示してくれればいいのですが、表示枠のブロック要素に text-align:center; を指定しても position を使っているためうまくいきません。
どなたか画像が小さかった場合のjavascriptを追加してくれると嬉しいな。

HTML

<p><img src="photo.jpg" id="thumb1"></p>

CSS

p.thumb{
 border: 1px solid #aaa;
 display:block;
 width:180px; /*トリミング後の横幅*/
 height:180px; /*トリミング後の縦幅*/
 overflow:hidden;
 position:relative;
 z-index:1;
 }
 p.thumb img{
 float:left;
 position:absolute;
 }

JavaScript

$(function( ) {
 $("#thumb1").on("load",function(){
 var iw, ih;
 var cw = 180; /*トリミング後の横幅*/
 var ch = 180; /*トリミング後の縦幅*/
 iw = ($(this).width() - cw) / 2;
 ih = ($(this).height() - ch) / 2;
 $(this).css("top", "-"+ih+"px");
 $(this).css("left", "-"+iw+"px");
 });
 });

コーディングしている案件によって最良の方法を選択したいと思います。

今回サンプル画像に使用したダミーイメージはURLを指定するだけで簡単に画像が表示されるのでとても便利です。詳細は以前投稿した下記をご覧ください。

ダミーイメージの生成ツールを目的別に使い分ける

Pocket
article clipper CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

5 thoughts on “CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ

  1. Pingback: 【CSS】スキップリンクのclipの使い方で戸惑ったのでメモ

  2. Pingback: 画像を背景指定せずにCSSだけでクロップする方法 | weblog by web.contempo.jp

  3. Pingback: CSSでflickr画像を同じサイズに | らいぱちからの刺客

名無し にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)