אבל נוספים, jQuery–שינוי גודל של תמונה לדוגמה

אני בירושה של ה-web part של הספק הישן של לקוח, ויש בעיה של גודל התמונה.  התמונות צריכה להיות 60×50 אך מסיבה כלשהי אי-זוגי, הספק המקורי אילצה אותם לתוך 42×42, כך שהם נראים squashed:

 

תמונה טובה

התמונה רע

הנה סימון (מעט פשוטה):

<טבלה class = 'מורחב-outlook'>
  <thead>
    <. tr>
      <th  רוחב ='100′>3 שלישי</th>
    </. tr>
  </thead>

  <tbody>
    <מחלקה tr = 'תחזית'>
      <td רוחב ='100′>
        <ul>
          <li class = "גבוה">גבוהה: 72&מעלות;F</li>
          <li class = "נמוכה">נמוך: 44&מעלות;F</li>
          <li class = 'תנאי'>סאני
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ רוחב = 42’ גובה = 42’ alt =” />
          </li>
        </ul>
      </td>
    </. tr>

  </tbody>

</טבלה>

ותשימו לב זה אפילו הנתיב של התמונה עצמה מציג את המימד הנכון (60×50) הספק המקורי כפה את זה 42×42.  ? למה?  משוגע.

בכל מקרה, . רציתי פתרון מהיר וקל לבעיה זו, פניתי jQuery.  הטריק היה כדי לאתר המתאים <img> תגים.  לא רציתי באפס מעשה עם כל תגי img אחרים (אשר הם רבים).  את הקטע הזה של jQuery עשה את העבודה:

<סקריפט סוג = טקסט/javascript"" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></קובץ script>

<סקריפט סוג = "טקסט/javascript">
     $(המסמך).מוכן(פונקציה () {

         $(' li.condition > img').כל(פונקציה (אינדקס, פריט)
           
{
             $(פריט).css("רוחב", "60"); 
             $(פריט).css("גובה", "50");
            });
     }); // במשלוח המסמך
</קובץ script>

? פיסת קוד מוצא את האוסף <li> תגיות שלו הינה "תנאי", <img> . ילדים.  זה ואז סובבת בין כל זה.  עבד כמו קסם.

אני כנראה יכול לייעל את זה, אבל אף פעם לא הייתי בחור unix זה נפתר π כדי 18 דיוק ספרות באמצעות שקיעת דם ואתה תקבל את המגיע, ואני לא כזו אם jQuery? בחור חיוך.

</קצה>

מנוי על הבלוג שלי.

עקוב אחרי הטוויטר ב http://www.twitter.com/pagalvin

תשאיר הודעה

כתובת האימייל שלך לא תפורסם. שדות חובה מסומנים *