概要 †
画像幅に上限値を設け、上限値を超えたら幅は上限値に合わせ、高さは比率を維持したまま縮小させるコードを作成します。
コード †
- ほんのり抽象的なコード。
1
2
3
4
5
6
7
8
9
10
11
12
| -
-
-
!
-
-
|
-
|
!
!
!
| function fixImageSize(){
var maxWidth = <上限値>;
$('<セレクタ>').each(function(){
var w = $(this).width();
if (w > maxWidth) {
$(this).height($(this).height()*(maxWidth/w)).width(maxWidth);
}
});
}
|
- Void of Knowledgeで使用しているコード。
IE8世代の一般的なブラウザ及び、Android上のブラウザで正しく動くことを確認しました。
これにより、画像を取るときも、貼るときも一切サイズを気にしなくてよくなり、ページが作り易くなりました。
1
2
3
4
5
6
7
8
9
10
11
12
| -
-
-
!
-
-
|
-
|
!
!
!
| function fixImageSize(){
var maxWidth = $('#body').width() * 0.9;
$('a.modal img').each(function(){
var w = $(this).width();
if (w > maxWidth) {
$(this).height($(this).height()*(maxWidth/w)).width(maxWidth);
}
});
}
|
検証時の環境 †