background-size in IE 8

13 בפברואר 2012

אין תגובות


 


בפורום החדש של msdn על עולם ה – web, עלתה שאלה כיצד ניתן לאפשר שימוש ב -background-size גם בגרסאות ישנות של ie,

 

במידה וכל מה שרוצים הוא להתאים את התמונה לפקד שעוטף אותה – ניתן להשתמש ב – filter, בצורה הבאה:

 

 


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.gif', sizingMethod='scale');


 

שורת הקוד הזאת תקטין את תמונת הרקע לפי גודל ה – div.

 

הבעייה אם אנחנו רוצים להגדיר רוחב וגובה של התמונה שלא תהיה באותו גודל של ה – div שעוטף אותה.

 

במקרה כזה בדפדפנים חדשים נוכל לכתוב

 



background-size: 90px 90px;


 

 

אחרי הרבה חיפושים הגעתי למסקנה שאי אפשר באמת ב – IE8 לתמוך בזה הצורה רגילה, לכן כתבתי את ה – handler עם הקוד הבא:

 

 



public void ProcessRequest(HttpContext context)


{


    context.Response.ContentType = "image/png";


 


    int width = int.Parse(context.Request.QueryString["width"]);


    int height = int.Parse(context.Request.QueryString["height"]);


    string url = context.Request.QueryString["url"];


 


    byte[] image = new WebClient().DownloadData(url);


    using (MemoryStream msToRead = new MemoryStream(image))


    {


        Bitmap newImage = new Bitmap(Image.FromStream(msToRead), new Size(width, height));


        using (MemoryStream msToWrite = new MemoryStream())


        {


            newImage.Save(msToWrite, ImageFormat.Png);


            image = new Byte[msToWrite.Length];


            msToWrite.Seek(0, SeekOrigin.Begin);


            msToWrite.Read(image, 0, image.Length);


 


            context.Response.OutputStream.Write(image, 0, image.Length);


        }


    }


}


 

 

כעת נכתוב את הקוד הבא ב – css

 



<style>


    div


    {


        background-image: url(1.jpg);


        background-size: 90px 90px;


        background-position: center center;


        background-repeat: no-repeat;


        width: 115px;


        height: 134px;


    }


</style>


<!–[if lte IE 8]>


<style>


    div


    {


        background-image: url(resize.ashx?url=http://localhost:49842/1.jpg&width=90&height=90) !important;


    }


</style>


<![endif]–>


 

 

 

במידה ומדובר בדפדפן מתקדם הוא ישתמש ב – backdround-size, אחרת התמונה תשלח ל – handler שתוריד את התמונה ותשנה את גודל התמונה לפי מה שהמשתמש רצה.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *