画像の大きさを指定する

画像の大きさ・サイズを文字の大きさ・フォントサイズにより可変にした場合、見た目どーなるのかを検証するためのリソース。

代替スタイルで font-size : 10px 〜16px まで用意したので、色々変えて試してちょ。


画像の大きさを色々指定してみる

ただ単純に画像を拡大縮小した場合の見た目

文字の大きさ・フォントサイズとは関係なく拡大・縮小しただけ。

どのへんまでなら縮小・拡大してもジャギーが出ないのか、見てみたかっただけ。

縮小の場合、たぶん、現状、Windows より Mac の方が綺麗に表示されてるかと……。

拡大でも 110 〜 120 % なら耐えられるかなぁ……。

<img src="/WR250F/Images/IMG_0880s.jpg" alt="" title="150% 〜 50%" width="150 〜 450" height="129〜387">

width="450" height="387"(150%)

width="420" height="361.2"(140%)

width="390" height="335.4"(130%)

width="360" height="309.6"(120%)

width="330" height="283.8"(110%)

width="300" height="258"(100%)

width="270" height="232.2"(90%)

width="240" height="206.4"(80%)

width="210" height="180.6"(70%)

width="180" height="154.8"(60%)

width="150" height="129"(50%)


画像の大きさ・サイズを、文字の大きさ・フォントサイズにより可変にした場合の見た目

img.PHOTO { width : 25em ; height : 21.5em ; } /* font-size が 12 px の時、原寸 */

p.Five 〜 Fifteen img.PHOTO { font-size : 50% 〜 150% ; }

font-size : 50% ;

font-size : 60% ;

font-size : 70% ;

font-size : 80% ;

font-size : 90% ;

font-size : 100% ;

font-size : 110% ;

font-size : 120% ;

font-size : 130% ;

font-size : 140% ;

font-size : 150% ;


おまけ

font-size : xx-small ;

font-size : x-small ;

font-size : small ;

font-size : medium ;

font-size : large ;

font-size : x-large ;

font-size : xx-large ;


続きがあります

それじゃ、各ブラウザでの画像の拡大・縮小した場合の見た目の比較をしてみましょう。


書いた人

初稿 2005-11-25T02:32:48+09:00 last modified 2005-11-27T18:13:46+09:00カナかな団首領

案内