ブログに画像を貼るとき、大きさを合わせたいなーということが、よくあります。
それが簡単にできてしまうCSSがあると聞いて、しらべてじっけんしてみました。
誰かが言った。
大きさやタテヨコの比率がまちまちの画像
これを同じ大きさで並べたい、そんな時に便利なCSSがあると──
それが
ここでは
CSSとHTMLは以下の通り。
CSS3サポート後進ブラウザの Opera Mini も、ベンダープレフィックス
ここでは余白が分り易いように赤いボーダーをつけています。
なお、サンプル画像は Firefox に表示させた
これをずらしたいときに使うプロパティです。
例によって Internet Explorer と Edge が未サポート。
更に、Android Browser 4.4以前もダメ。
弊ブログへの訪問者のうち、Android OS端末のユーザー様は、ほとんど Chrome を使っていらっしゃるようなので Android Browser への対応はしなくてもいいかも?とも思いますが、IE と Edge については、ofi.js という JavaScript のプラグインで対応できるというので、ちょっと見てみました。
こんなコードが書いてありました。
変数
未サポートブラウザでは
というわけで、IE と Edge では、
通常の画像のような右クリックからの保存もできません。
うーん、これだと
CSSとHTMLをそれぞれ
その際、表示位置は
あと、途中で思い出したけど
ライブドアブログのスマホ版では
ここまで書いといて何ですが、とても便利そうな
それが簡単にできてしまうCSSがあると聞いて、しらべてじっけんしてみました。
誰かが言った。
大きさやタテヨコの比率がまちまちの画像
それが
object-fit
参考サイト様
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス
目次
object-fit と object-position
効かせたい画像要素に、(必要なら)適当なクラス名をつけます。ここでは
ofi
という名前にしました。CSSとHTMLは以下の通り。
img.ofi{ width: 27%; height: 180px; margin: 12px; -o-object-fit: cover; object-fit: cover; }
<img class="ofi" src="画像URL" alt="画像の説明">
width
、height
、margin
など通常のプロパティはデザインに合せて適当に。object-fit: cover
で、バラバラサイズの画像が、指定した同じサイズに、いい感じにリサイズされます。CSS3サポート後進ブラウザの Opera Mini も、ベンダープレフィックス
-o-
をつければちゃんと機能します。
object-fit プロパティ
object-fit
プロパティに指定できる、五種類の値それぞれについて見て行きましょう。ここでは余白が分り易いように赤いボーダーをつけています。
なお、サンプル画像は Firefox に表示させた
object-fit
画像のスクショです。
- fill
- 領域に合せて縦横比を変更して表示(デフォルト値)。
これは<img>
タグの初期動作と同じ、つまりobject-fit
を効かせていないのと同じですね。 - cover
- 幅と高さの小さい方に合わせ、はみ出した部分をトリミングします。
大きさを揃える目的なら、これがいちばん有用な感じ。 - contain
- 幅と高さの大きい方に合わせ、足りない部分は余白として表示。
- none
- 元画像のサイズそのままに表示。大きい画像はトリミングされ、小さい画像は余白ができます。
- scale-down
- contain と none の、小さい方のサイズで表示
object-position プロパティ
画像リサイズのデフォルトの基準点は画像の中心です。これをずらしたいときに使うプロパティです。
<img class="ofi-none" src="画像URL" style="object-position: xxxx;">
この↑xxxxの部分に指定します。
- top
- 上に寄ります。
- right
- 右に寄ります。
- 以下同文
-
同様に、
bottom
で下、left
で左に寄ります。bottom left
のように組み合わせると左下になります。
何も指定しなければ、デフォルト値のcenter center
が適用されます。 - 数値
-
また、数値を指定することもできます。
単位はpx
、em
、%
など、CSSで使える単位全般。object-position: -30px 60px;
左に30px、下に60pxずらしたサンプル。object-fit
にcover
やnone
を指定していても、余白の見える位置までずれます。
というかすこやんかわいいですね。
objectFitImages()
未対応ブラウザ対策
が…例によって Internet Explorer と Edge が未サポート。
object-fit
が無効=<img>
タグ本来の仕様で、領域の大きさにに画像全体を合わせるため、ゆがんで表示されてしまいます。更に、Android Browser 4.4以前もダメ。
弊ブログへの訪問者のうち、Android OS端末のユーザー様は、ほとんど Chrome を使っていらっしゃるようなので Android Browser への対応はしなくてもいいかも?とも思いますが、IE と Edge については、ofi.js という JavaScript のプラグインで対応できるというので、ちょっと見てみました。
導入
導入方法は以下の4ステップです。JSファイルをダウンロードする
GitHub からダウンロードします。JSファイルをアップロードする
ダウンロードしたファイルのうち、dist というフォルダに入っている ofi.min.js(ofi.js の圧縮版)をサーバーにアップロードします。
他のファイルは要りません。CSSの設定
前記のCSSに、<img>
要素ではまず使うことのないスタイル、font-family
を追加し、'object-fit: cover;'
という文字列を指定します。img.ofi{ width: 27%; height: 180px; margin: 12px; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;' }
スクリプトタグを貼る
フリーエリアまたは<body>
タグのなるべく下の方とかに、これを貼るだけ。<script src="http://(ファイルパス)/ofi.min.js"></script> <script> window.onload=function(){ objectFitImages('img.ofi'); }; </script>
関数objectFitImages()
の引数には、3.で定義したセレクタ名を指定します。
何も指定しなければ、全ての<img>
タグが対象になります。
以下、蛇足
このプラグインは上記のfont-family
を読んで処理をするようですね。こんなコードが書いてありました。
var propRegex = /(object-fit|object-position)\s*:\s*([-\w\s%]+)/g;
function getStyle(el) { var style = getComputedStyle(el).fontFamily; var parsed; var props = {}; while ((parsed = propRegex.exec(style)) !== null) { props[parsed[1]] = parsed[2]; } return props; }
exec
は文字列の中のマッチするパターンを順次探していくメソッド。変数
style
から、プロパティ:値;
のパターンを取り出し、まず配列parsed
に格納します。パターンが存在する場合、
parsed[0] = ''; //最後にマッチした文字列(二回目以降に入る) parsed[1] = 'object-fit'; parsed[2] = 'cover';となるので、連想配列を使用して
props['object-fit'] = 'cover';こうしてデータを格納したオブジェクト変数
props
を返します。未サポートブラウザでは
object-fit
を読めない(undefined
になってしまう)が故の、苦肉の策という感じですね…というわけで、IE と Edge では、
props
のデータをもとになんやかんやして、<img>
タグが以下のように変換されます。
<img class="ofi" style="background-position: center; background-image: url(画像URL); background-repeat: no-repeat; background-size: cover;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='423' height='338'%3E%3C/svg%3E" data-ofi-src="画像URL" >
src
属性には画像URLではなく(ダミーの?)data URIスキームが設定され、画像は、実質style
属性のbackground
関連プロパティで表示させるよう書き換えられています。通常の画像のような右クリックからの保存もできません。
うーん、これだと
<div>
タグに領域のクラスを当ててbackground
指定しても同じですね。CSSとHTMLをそれぞれ
div.fit-on-cover{ width: 200px; height: 200px; margin: 12px; /* 適当 */ background-repeat: no-repeat; background-size: cover; }
<div class="fit-on-cover" style="background-image: url(画像URL)"></div>とすれば、
fill
とscale-down
以外は全く同じことができます。その際、表示位置は
object-position
ではなくbackground-position
で調整します。指定の仕方は全く同じです。あと、途中で思い出したけど
ライブドアブログのスマホ版では
<img>
タグの大きさ指定は無視されるんでした。ここまで書いといて何ですが、とても便利そうな
object-fit
、ウチでは使う機会は無いかも…
コメント