- 2010年4月 6日 23:55
- iPhone | javascript
- Tweet
iPhone用のサイトを作るとき画像をそのまま流用すると、iPhoneの画面（320px × 480px）よりも大きい画像がはみ出てしまう。「 【MovableType】iPhone用テンプレートの導入」でこのブログのiPhone対応を行ったのだが、このテンプレートにはその対策としてmax-widthタグが使われていた。
.entry img {
max-width: 95% !important;
}
しかし、これでは幅が縮められるだけなので縦長の画像になってしまう。縦横比を保ったまま縮小する方法を探したのだが、CSSのみでは難しいようだ。以下のサイトを参考にしつつJavascriptで書いてみた。
iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone - bute_lab.
http://www.bute-studio.com/lab/2009/11/iphone-imgwidth.html
max-widthとアスペクト比 - 報國挺身日記
ImageSizeChanger
機能
ページを読み込んだとき、及びiPhoneの向きを変えたときに、画像を指定のサイズへリサイズします。サイズの初期設定は画面幅 - 20px、つまり300px（縦向き）、460px（横向き）です。
iPhoneを縦にしたところ
横に倒したところ
使い方
ファイルを<script>タグで読み込んだ後、ImageSizeChanger.set();で起動します。スクリプトはHTMLソースのどこに書いても構いません。
例
<script type="text/javascript" src="http://blog.remora.cx/m/ImageSizeChanger.js"></script> <script type="text/javascript"> // 画像のサイズを（画面幅 - 10px）にする ImageSizeChanger.config.margin = 10; // ISCを起動する ImageSizeChanger.set(); </script>
ソース&ダウンロード
ダウンロード
/*
* ImageSizeChanger
* http://blog.remora.cx/2010/04/image-size-changer.html
*
* @version
* 1.0.0 (April 6 2010)
*
* @copyright
* Copyright (C) 2010 delphinus <delphinus@remora.cx>
*/
if ( ! window.ImageSizeChanger ) var ImageSizeChanger = function() {
var isc = {
// configuration
config: {
/* Resize image width to
* ( portraitWidth or landscapeWidth ) - margin.
* For iPhone, it makes 300px or 460px.
*/
margin: 20
,portraitWidth: 320
,landscapeWidth: 480
}
,items: null
,getItems: function(){
if ( ! isc.items ) isc.items = function() {
var m, i
,images = document.getElementsByTagName( "img" )
,items = new Array()
;
for ( i = 0; i < images.length; i++ ) {
m = images[ i ];
items.push( {
originalWidth: m.width
,originalHeight: m.height
,img: m
} );
}
return items;
}();
return isc.items;
}
,setSize: function() {
var w, h, m, i
,items = isc.getItems()
,config = isc.config
,maxWidth = Math.abs( window.orientation ) === 90
? config.landscapeWidth - config.margin
: config.portraitWidth - config.margin
;
for ( i = 0; i < items.length; i++ ) {
m = items[ i ];
w = m.originalWidth;
h = m.originalHeight;
if ( w > maxWidth ) {
m.img.width = maxWidth;
m.img.height = h * maxWidth / w;
}
}
}
,set: function() {
var f = isc.setSize;
window.addEventListener( "load", f, false );
window.addEventListener( "orientationchange", f, false );
}
};
return isc;
}();
- Newer: 【Perl】PARでexe化するときにファイルを追加する
- Older: 【MovableType】編集画面をテキストエリアにする
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://blog.remora.cx/mt/mt-tb.fcgi/172
- Listed below are links to weblogs that reference
- iPhoneの向きによって画像の大きさを自動的に変えるスクリプト from blog.remora.cx
