css 2.1の仕様に従う場合は、半角スペースではなくカンマ（ , ）で区切る必要があります。（ただし、カンマ区切りはieでは対応していません） 領域の指定方法.
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。CSSのトリミングは、パターンによってやり方がいくつかあるので、自分の仕様に合わせたものを選んでください。外側の枠でトリミングしたいサイズを指定し、画像をSee the Pen See the Pen See the Pen See the Pen 理想は、画像を加工できる環境、運用ができるのでしたら、画像をリサイズや圧縮して軽くしたり、きれいに見える位置で加工してトリミングする方が、見た目としても重さとしてもサイトにとっては良いと思います。TAMのコワーキングスペース (東京・大阪)では、随時セミナー・勉強会など開催中です。TAM のテクニカルチームのメンバーが、JavaScript / SEO / CMS / HTML などテーマ別の技術グループに分かれて毎週更新しています。 ナビゲーションCSS Sprites で、画像を結合した際に再度CSSをいじったのでページの内容（主にclip というプロパティは、セレクタが表示される領域内から座標を指定して、指定外の部分を隠しその部分だけを切抜き表示するものです。画像をいくつも読み込むとページの表示速度が落ちることになるので一枚の画像から一部を切り抜いて表示する CSS Sprites や、:hover などの擬似クラスと組み合わせたロールオーバーにも使用できます。このプロパティの使用に少し苦労したので、ポイントについてリスト式で書いておこうと思います。半角空白だとW3Cのチェックでエラーになったので、カンマに変更。IE6,7には条件付きコメントによる別スタイルシートの方で半角空白で記述しておけば、適用できます。そのため切抜き表示したい場合は、以下のように切り抜く画像に設定する ID 以外に、表示領域用の Class も併せて記述することになります。方法だけだとわかりにくいので、具体例として以前このサイト内で実際に使用していた画像から、W3CのXHTML用アイコンを clip で切り抜いて表示する場合の記述を載せておきます。最後に、上の記述で切抜き表示するとこのようになります。id の x-w3c は、実際に使用しているため２度使うとエラーが出ます。なので、上記の画像はインラインスクリプトで再現してみました。なお、CSS Sprites のために使用する場合は、HTML上で画像の width と height を指定してしまうと、CSS Sprites 用の画像のサイズが変わった場合に、歪んでしまいます。この場合、いちいち全HTMLの画像のサイズを変更しないといけなくなるので、width と height は CSS 側で変更しましょう。また、.bunner は 88×31 専用になっていますので、他のサイズ用の領域も必要ということになります。なので、以下のように .bunner の記述を CSS Sprites 専用の class 属性を別に用意して分けた方が管理しやすいです。（HTMLでは同時に読み込みましょう。）これで画像のサイズが変わった場合は、.sprites img のサイズを変更するだけでよくなり、新たに表示領域とする class を作る場合も、width と height さえ指定すればよくなります。CSS Sprites の方法として、background-position による切抜き表示でなく、alt 属性が使える clip による切抜きを採用してみました。ただ、clip がブラウザごとに扱いが異なるようで、画像を表示させる領域に overflow:hidden; と position:relative; を設定しないと安定した表示が見込めません。なので、記述が増えてしまう事もあり、alt 属性と title 属性を使う必要がないただのボタンを設置する場合は、background-position による方法の方がいいかもしれません。 HTMLとCSSだけで表示・非表示を切り替える方法を解説しました。jQueryなしでも簡単に実装することができます。また、アイコンをクリックと同時に変える方法も紹介しています。 画像の高さが100pxより高い場合は、残りの画像を非表示にします（例：高さ80pxの画像 - >全画像を表示、高さ150pxの画像 - >最初の100pxのみを表示）。 CSSでそれをする方法はありますか？ cssのみで画像をトリミングする方法 中央配置してはみ出た部分を隠す. CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。 表示される領域を、画像（実際の領域）の上端と左端からの距離で指定します。 タイトルロゴ画像を表示して、附随するテキストは隠したい、そんな時。 これまでは、text-indent:-9999pxでテキストを飛ばして画像に置換する方法が多く使われてきました。
こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe. 縦・横・中央、何を基準にするにしても、基本的には「中央配置してはみ出た部分を隠す」形でトリミングしています。 ちなみに上記エントリでは、これら …
CSS 画像の一部を使う3つの方法 .