タグ

画像に関するyamanchunokuniのブックマーク (2)

  • 簡単!リアルタイム画像変換をNginxだけで行う方法

    先週金曜日(12/2)にクックパッドインフラ勉強会に参加しまして、そこで同社の成田さんから「今日からできるApacheモジュール開発と運用」という発表がありました。 リアルタイム画像変換モジュールの「TOFU」を開発するに至った経緯と、Apacheモジュール開発についてのお話でした。 TOFUは、S3に置かれたマスターとなる画像ファイルを取得し、与えられたパラメータでリアルタイム(オンザフライ)にリサイズ・トリミングを行うモジュール(mod_tofu)です。 料理を楽しくする画像配信システム 実際は、モジュールによる画像取得・変換をベースに、キャッシュや配信までも含めた一連の画像配信システムと言えそうです。 この仕組みをNginxを使って実装できないかと考えて、リアルタイム変換の仕組みをNginxだけで実現する方法を実験してみました。 準備するもの HttpImageFilterModul

    簡単!リアルタイム画像変換をNginxだけで行う方法
  • CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法

    ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。 動作は主要ブラウザ(IE/FF/Chrome/Safari/Opera)の現時点での最新版で確認しています。 動作確認は以下のサンプルをご利用ください。 サンプル 1.ウィンドウの高さに合わせて画像を拡大・縮小する ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。 HTML <div id="box"> <img src="画像のURL" alt="coffee" /> </div> CSS #box { height: 20%; } #box img { height: 100%; } img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。 2.ウィンドウの幅に合わせ

  • 1