/* 例:幅640px高さ360pxの画像の場合 */ #targetElm{ height: 0; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */ padding-top: 56.25%; background: url('bg.png') 0 0 no-repeat; background-size: contain; }
データベースに登録されている画像を表示させたいことは良くあるもので。 ユーザに画像をアップロードさせる場合、画像のサイズ(Byte)を制限するのは当然としても、幅と高さを制限されるっちゅーのはあまり聞いたことがない。 表示させる段階でサイズを指定してあげれば良いけど、横に長~いものとか縦に長~いものとかをアップロードされると困る。 画像に対してCSSでwidthまたはheightを片方指定すると、もう一方の長さは指定した方の長さの比率通りに自動的に伸縮する(多分)。 そこで、どっかのタイミングでどちらかが長いかを判断して、CSSを指定する必要がある。 以前、PHPでアップロードされる画像の幅と高さを取得して、どちらが長いかをデータベースで保持するようなコードを書いたことがあったけど、きったねえやり方だなぁと思っていた。 ちなみにPHPでの幅と高さの取得は以下。 $image_siz
Picturefill A responsive image polyfill. Authors: See Authors.txt License: MIT This project is archived and deprecated! At the time, it helped us transition to responsive image HTML patterns until browsers supported them. Support and fallback strategies are now very good, and this project is no longer needed or recommended. Thanks everyone!` Picturefill has three versions: Version 1 mimics the Pic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く