background-size - מכירים איזה תיקון שעובד בIE7-8?

Question

יש לי תמונות פרופיל שצריכות להיות מוצגות עם מסגרת מעוגלת עם צל.

לצורך כך יש לי דיו שהרקע שלו מכיל את תמונהת הפרופיל והתוכן הוא התמונה עם המסגרת שיש לה רקע שקוף,

הקצוות של המסגרת הם גם שקופים כך שיתאימו כל רקע עליו תשב התמונה.

בFF וכרום זה כמובן נראה נהדר. אבל יש לי בעיה עם IE7 וIE8 שלא תומכים במאפיין background-size

קוד רלוונטי

<div style='background-image: url(/images/Pictures/pic_18118.jpg); background-size:103px 110px; background-position:6px 12px; background-repeat: no-repeat; float:right; width:115px;  height:134px;'><img src='/images/Pictures/PicFrame.png' alt=''  style='width:115px;  height:134px;'/></div>

מצאתי באינטרנט פתרונות כמו הוספת פילטר :

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

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

אבל זה לא עבד

בתודה מראש.

Answer 1

אולי זה יעזור לך:

http://www.quirksmode.org/css/condcom.html

---

sara frank

Answer 2

תודה אבל את זה אני מכירה,

אני מחפשת משהו ספציפי יותר שמתאים לבעיה זו.

בתודה

Answer 3

בשונה מ - css רגיל שבו הכתובת לתמונה מתייחסחת למיקום הפיזי של קובץ ה - CSS, כתובת התמונה ב - FILTER מתייחסת לדף HTML בו מופעל ה - FILTER.

לכן ייתכן שזה אמור לעבוד, רק תוודאי שהכתובת של התמונה נכונה בשני המקומות

http://reference.sitepoint.com/css/filter

אם עזרתי סמני כמועילה

Answer 4

קראתי את המאמר בכתובת שצירפת

ואני רואה שהfilter כלל לא מתאים לי . הfilter מכיל כמה אופציות.

או שהתמונה גדלה - מתכווצת בהתאם לדיו המכיל אותה או בהתאם לגודל של האלמנט עצמו

אני מחפשת דרך להקטין את תמונת הרקע - שתהיה קטנה יותר מהדיו שלה - כי התמונה שהדיו מכיל יש לה מסגרת שרק בתוכה אמורים לראות את תמונת הרקע..

כי בשוליים יש צבע שקוף.

אני מעלה 2 תמונות בשביל להראות את המצב התקין ואת המצב הבעייתי

המצב הבעייתי בIE

המצב התקין בכרום ובFF

Answer 5

אולי זה יתאים לך 

http://www.modernizr.com/docs/

Answer 6

כתבתי את הפוסט הבא עבורך,

http://blogs.microsoft.co.il/blogs/shlomo/archive/2012/02/13/background-size-in-ie-8.aspx

אם זה עוזר סמני כמועיל.

Answer 7

שלמה

אני כ"כ מעריכה את הזמן שהשקעת בחיפושים אחר תשובה, ולאחר מכן במציאת פתרון, וכתיבת בלוג מיוחד לענין.

אני מניחה שבדקת אותו והוא עובד.

הענין הוא שהפתרון צריך לעבוד גם בASP קלאסי. איך אני מיישמת את הhandler הזה בasp קלאסי?

רוב תודות,

גולוש

Answer 8

השימוש ב - handler הוא מתוך ה - html, כתיבה של ה - handler עצמו ב - ASP, לא אמורה להיות בעייתי, אנסה יותר מאוחר לכתוב אחד כזה.

שלמה

Answer 9

כמה נקודות:

1. הבהרה: אם לא הובן אז ה handler עליו מדובר הוא פשוט יצירת תמונה באופן דינמי (on the fly) ולכן השימוש בתמונה הוא כמו כל תמונה אחרת וניתן גם לגשת אליו ישירות או לשמור את התמונה או לשים את התמונה בעמוד. בסך הכל מדובר על כך שבמקום ליצור עמוד ASPX שמחזיר HTML אז מייצרים עמוד שמחזיר תמונה

בצורה זו מפתחים מצבים בהם השרת מחזיר עמוד HTML או קובץ תמונה או קובץ אקסל למשל. הכותר (HEADER) אותו ונים בשרת ולפיו הדפדפן מזהה את סוג ה"קובץ" שמגיע אליו נקבע בשורה הבאה
context.Response.ContentType = "image/png"

את יכולה לגשת בדוגמה של שלמה ישירות לקישור:
resize.ashx?url=http://localhost:49842/1.jpg&width=90&height=90

ותראי שאת מגיעה פשוט לתמונה. כל שאר ההסבר הוא בדיוק כמו ההסבר כיצד לעבוד עם כל תמונה. אני ממליץ לעבור מעט ולהבין כיצד השרת עובד וכיצד הוא ומה הוא מחזיק לדפדפן. קישור כמו שיש למעלה אל חייב להחזיר טקסט או HTML הכולל תמונות ותוכן אלא יכול להחזיר כל סוג קובץ למשל

2. הערה קטנה OFF: זו בדיוק הבססי לדרך בה נעזרים כדי לחסום שמוש בתמונות דרך אתרים אחרים.

3. הערה: זיכרון... זיכרון... זיכרון... (וגם מעבד מעט במקרה של תמונה)!

יש תמיד לחשוב על כך שאם עובדים עם תמונה דינאמית הרי שהיא נשמרת על הזכרון.

* האם נכון לשמור את כל התמונות של כל מי שניגש למערכת בזכרון?
* האם נכון לבנות את התמונה הדינאמית עבור כל משתמש מחדש (מינימום שהייתי מוסיף זה שורת קוד שמכניסה את התמונה לזיכרון מטמון ולא מיצרת אותה מחדש בכל פנייה של כל משתמש לשרת).
* האם לא נכון יותר לבנות תמונות בצורה קשיחה פעם אחת בזמן שהמשתמש מעלה אותם כבר מוכנות לעבודה במקום בכל פעם שהמשתמש קורא אותם?!?

ישנם עוד הרבה שאלות שעולות וצריך לחשוב עליהן. מדובר בפתרון יפה אבל לא מעשי שבעקרון לא מתאים לאתר מסחרי פעיל (לא שהוא לא יעבוד אלא שהוא כולל השקעה יותר מפתרונות אחרים טובים יותר למקרה הנוכחי המסויים). בכל מקרה בקצרה חייבים לאפיין את הבעיה והפתרון וככלל אצבע אני לא ממליץ לעבוד עם הפתרון שהוצע כפי שהוא (זו תשובה נהדרת כדי להראות את הרעיון של שימוש בתמונה דינמית ולשם לימוד).

4. הארה: ניתן לבנות/לעדכן תמונות (ואקסלים וכל סוג קובץ אחר) בצורה דינאמית גם ב ASP קלאסי כמובן. כדאי לבדוק בגוגל חומר על רכיב בשם AspJpeg לדוגמה. מצד שני ניתן לבנות רכבי דומה ב דוט נט ואז לגשת אליו מ ASP קלאסי גם כן (ראה סעיף 1.. זו תמונה לכל דבר מהרגע שהיא נוצרה כך שאם השרת תומך ב ASP.NET ניתן לעבוד עם הקוד שכתב שלומה גם בקובץ ASP קלאסי)

4. אם כבר עושים שימוש בתמונה דינמית למה לעשות שימוש בקישור מורכב כמו:
resize.ashx?url=http://localhost:49842/1.jpg&width=90&height=90

לא יותר קל פשוט לקשר אל משהו שהמשתמש יזהה שזו תמונה כמו למשל ImageName_90_90.jpg ?!?
בדרך כלל כשכותבים handler לתמונות זה הדבר ההגיוני והמומלץ. לא מדובר בהוספה של עוד הרבה קוד אלא בסך הכל להוסיף ראוטר בקובץ גלובל אסא אשר יזהה את הכתובת ImageName_90_90.jpg ויבצע בדיוק את אותה פעולה ששלמה הציג כאן כאשר הרוחב והגובה נקבעים לפי הכתובת ישירות.

5. ולסיום נחזור לנקודה 2+4 ונקודה OFF שככה הדבר מבוצע במערכות רבות בהם אתם גולשים לתמונה עם שם של תמונה רגילה שהעלתם והכל עובד טוב כשהתמונה היא בתוך אתר שמאוחסן אצלהם. אבל אם אתם מנסים לגלוש לתמונה מחו"ל או מנסים לנצל את האחסון כדי לעשות שימוש בתמונה דרך אתר חיצוני אז אתם מקבלים עבור אותה תמונה בדיוק משהו אחר כמו למשל אייקון של המקום בו שמרתם את התמונה.

***** לסיכום: תחשבי קודם על אפיון המערכת והאם את רוצה לעשות שימוש בתמונות דינמיות או קבועות למשל ובשלב השני תחשבי על כיצד לייצר את התמונות הדינמיות או הקבועות שלך (בדוט נט בקוד שלך בסיס של מה ששלמה כתב או למשל רכיב חיצוני מוכן כמו AspJpeg )

---

Answer 10

תודה לשלמה ותודה גם לך פיתוח.

מודה ומתוודה שבככל שנותי בתכנות עוד לא יצא לי לעבוד עם קבצי ashx אז לא הכרתי את הסינטקס שלהם לחלוטין

וזה מה שגרם לי לא להבין איך להשתמש בהם.

אתמול חיפשתי באינטרנט את הקוד איך נראה קובץ ashx והתחלתי לעבוד איתו אך לא קיבלתי תמונה בחזרה

ההערה המועילה שלך - שניתן לגשת לקובץ דרך שורת הכתובת עזרה לי למצוא את הבעיות  חוסר של namespaces...

ועכשיו אכן זה עובד.

קצת על המערכת: כמובן שכתבתי משתמשים בשביל לטשטש את המערכת האמיתית אבל בגדול יש לי מאות תמונות

שאני עושה בהם שימוש בהרבה מאוד דפים באתר - השימוש הוא ברובו דינאמי. כלומר יש לי גם דף של משתמש שבו תמיד מוצגת התמונה שלו.

אבל מעבר לכך בכל מקום אחר אני מחליטה בצורה דינאמית איזה תמונה להציג - ולכן חשוב לי הדינאמיות.

אם כי אני לוקחת לתשומת ליבי לבדוק איך אני כותבת לו להכניס את כל התמונות למטמון ( זה אמור לעבוד ספציפי לתמונה כן? כי בכל טעינה של הדף יכול להיות שייצא צירוף אחר של תמונות)

בקשר להערה בנוגע לצורת הכתובת, מכיון שמדובר בASP קלאסי אין לי את הקובץ global.asax כך ששם אני לא יכולה להגדיר לו רולים בנוגע לפירוש הכתובת

אני משתמשת בחלק מן הדפים באתר בrewriter 3 של helicon לפירוש כתובת ידידודיות..

אבל פה מכיון שהקישור לדף הוא פנימי מתוך הקוד, מה הענין בזה?

אני סתם אצטרף להוסיף קוד - לבניית שם התמונה הדינאמית ואח"כ לפירוש שלו? יש לזה מטרה נוספת מעבר ליופי של הכתובת?

אז תודה לכם מאוד.

אני מאוד מאוד מעריכה את הזמן שאתם מקדישים לפתרון הבעיות.

יום טוב גולוש

לתועלת גולשים בורים כמוני אני מצרפת את הקוד המלא של קובץ הASHX:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Net;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

public class Handler : IHttpHandler {

    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);
		}
	    }
    }

    public bool IsReusable {
	get {
	    return false;
	}
    }
}