画像の大きさ・サイズを文字の大きさ・フォントサイズにより可変にした場合、見た目どーなるのかを検証するためのリソース。
代替スタイルで 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 ;
それじゃ、各ブラウザでの画像の拡大・縮小した場合の見た目の比較をしてみましょう。