jquery.backgroundSize.js
Introduction background-size: cover; scales an image to cover entirely the background of a target element (the body of this page is styled this way). background-size: contain; scales an image to make it as big as possible but always entirely visible (or contained) in the background of a target element (this box is styled this way). background-size is available in IE9+, Firefox, Chrome, Safari and
IE8ã§ã‚‚background-sizeを変更ã™ã‚‹ã€‚ - ã¿ã‹ã¥ãブãƒã‚° ãã®3
CSS3ã‹ã‚‰å°Žå…¥ã•ã‚ŒãŸbackground-sizeéžå¸¸ã«ä¾¿åˆ©ãªãƒ—ãƒãƒ‘ティã§ã™ã€‚ ã“ã‚Œã•ãˆã‚ã‚Œã°background-imageã«è¨å®šã—ãŸç”»åƒã®ã‚µã‚¤ã‚ºã‚’変更ã—放題ã€ã—ã‹ã—IE8ã§ã¯åŠ¹ãã¾ã›ã‚“。 ãªã‚“ã¨ã‹ãŒã‚“ã°ã‚‹ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景画åƒã®ãƒ‘ス',sizingMethod='scale'); ã¨æŒ‡å®šã™ã‚‹ã¨ã€background-size: 100% 100% ã«è¿‘ã„å‹•ãを実ç¾ã§ãã¾ã™ã€‚ jQueryã®ãƒ—ラグインをã¤ã‹ã† jquery.backgroundSize.js ã‚’ã¤ã‹ã†ã¨JSã®åŠ›ã§è§£æ±ºã§ãã¾ã™ã€‚ jquery.backgroundSize.js
IE8ã§ç”»åƒã®heightãŒautoã§è¡¨ç¤ºã•ã‚Œãªã„時ã®å¯¾å‡¦æ–¹æ³•
縦横比率ãŒæ±ºã¾ã£ã¦ã„ãªã„ç”»åƒã‚’システムã§ãƒ©ãƒ³ãƒ€ãƒ ã«è¡¨ç¤ºã™ã‚‹éš›ãªã©ã€æ¨ªå¹…(width)をピクセルやパーセントã§å›ºå®šã—ã¦ç¸¦å¹…(height)を『autoã€ã«ã™ã‚‹ã¨ä¾¿åˆ©ã§ã™ãŒã€InternetExplorer8ã§ã¯é«˜ã•ãŒ0ã¨èªè˜ã•ã‚Œã¦ã—ã¾ã„ã€æ½°ã‚ŒãŸç”»åƒã«ãªã£ã¦ã—ã¾ã„ã¾ã™ã€‚ IE8ã§ç”»åƒã®heightãŒautoã§è¡¨ç¤ºã•ã‚Œãªã„時ã®å¯¾å‡¦æ–¹æ³•ã¯ä»¥ä¸‹ã‹ã‚‰ã€‚ 下記ã®æ§˜ãªè¨˜è¿°ã§ã¯ã‚¤ãƒ³ã‚¿ãƒ¼ãƒãƒƒãƒˆã‚¨ã‚¯ã‚¹ãƒ—ãƒãƒ¼ãƒ©ãƒ¼8ã§ã¯ç”»åƒãŒè¡¨ç¤ºã•ã‚Œã¾ã›ã‚“。 img { width: 100%; height: auto; } 下記ã®æ§˜ã«ã€Žwidthã€å±žæ€§ã‚’『inheritã€ã«å¤‰ãˆã€æ–°ãŸã«ã€Žmax-widthã€å±žæ€§ã‚’『100%ã€ã¨æŒ‡å®šã™ã‚‹äº‹ã§ã€IE8ã§ã‚‚å•é¡Œç„¡ã表示ã•ã‚Œã¾ã™ã€‚ img { width: inherit; max-width: 100%; height: auto; } パーセント値ã§ã¯ãªãピクセル数ã§æŒ‡å®šã™ã‚‹ã“ã¨ã‚‚
IE8をレスãƒãƒ³ã‚·ãƒ–ã€HTML5ã‚„CSS3ã€rgba角丸ã«å¯¾å¿œã•ã›ã‚‹å ´åˆã®æ³¨æ„点ã¾ã¨ã‚ - 京都ã®ãŠå¢¨ä»˜ãï¼
IEã§HTML5ã‚„CSS3を使ã†å ´åˆã€ã„ãã¤ã‹è£œåŠ©ãƒ—ãƒã‚°ãƒ©ãƒ ã‚’èªã¿è¾¼ã‚“ã ã‚Šã€åˆ¶ä½œä¸Šã®æ³¨æ„点ãŒã‚ã‚Šã¾ã™ã€‚ã“ã‚Œã¯ã€ãã¡ã‚“ã¨HTML5ã‚„CSS3ã®ä»•æ§˜ã‚’身ã«ã¤ã‘ã¦ã„ãªã„ã¨ã€Œå‹•ä½œã—ãªã„ã€ãªã©ã®ãƒˆãƒ©ãƒ–ルã«è¦‹èˆžã‚れるã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ ã“ã®è¨˜äº‹ã§ã¯ã€ã€Œãªãœã€ãã†ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã®ã‹ã€ã‚’ã‚ãƒãƒ³ã¨æ›¸ã„ã¦ã€ä»•æ§˜ãƒ»ä»•çµ„ã¿ã‚’ç†è§£ã—ãŸä¸Šã§ä½¿ã„ã“ãªã™ã“ã¨ãŒã§ãるよã†ã«ãªã‚‹äº‹ã‚’目標ã«æ›¸ãã¾ã—ãŸã€‚ IE8ã§ã€HTML5ã®Sectionsタグを使ãˆã‚‹ã‚ˆã†ã«ã™ã‚‹ã€Œhtml5shiv.js〠「Sectionsã‚¿ã‚°ã€ã¨ã¯ä»¥ä¸‹ã®ã‚¿ã‚°ã§ã™ã€‚ã“ã‚Œã¯HTML5ã§å®šç¾©ã•ã‚Œã¦ã„ã¾ã™ãŒã€IE8ã§ã¯ä½¿ãˆãªã„ã‚‚ã®(HTML5ã§è¿½åŠ ã—ãŸåˆ†)ãŒã‚ã‚Šã¾ã™ã€‚ã“れを使ãˆã‚‹ã‚ˆã†ã«ã™ã‚‹ã®ãŒã€Œhtml5shiv.jsã€ã§ã™ã€‚ section (HTML5ã‹ã‚‰è¿½åŠ ) nav (HTML5ã‹ã‚‰è¿½åŠ ) article (HTML5ã‹ã‚‰è¿½åŠ ) aside (HTML5ã‹
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://w-fire.com/2013/05/14/ie6ie7ie8%E3%81%A7%E3%82%82css3%E3%81%AEbackground-size%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92css%E3%83%8F%E3%83%83%E3%82%AF%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%8Ejquery-backgroundsize-j/
{{#tags}}- {{label}}
{{/tags}}