ยัง ได้เพิ่มเติม jQuery–ปรับขนาดของตัวอย่างรูปภาพ

ผมรับมา web part จากผู้ขายเดิมของลูกค้า และมีปัญหาขนาดภาพ  ภาพควรเป็น 60×50 แต่ด้วยเหตุผลบางอย่างแปลก, ผู้ขายเดิมบังคับให้เป็น 42×42, ให้ squashed:

 

รูปภาพที่ดี

ภาพไม่ดี

นี่คือมาร์กอัป (ค่อนข้างสมัยใหม่):

<ตารางเรียน = 'ขยายการ outlook'>
  <thead>
    <tr>
      <th  ความกว้าง ='100′>3 วันอังคาร</th>
    </tr>
  </thead>

  <tbody>
    <คลาส tr = 'การณ์'>
      <ความกว้างของ td ='100′>
        <ul>
          <คลาส li = 'สูง'>สูง: 72&องศาเซลเซียส;F</li>
          <คลาส li = 'ต่ำ'>ต่ำ: 44&องศาเซลเซียส;F</li>
          <คลาส li = 'เงื่อนไข'>ซันนี่
            <ใช้ได้ 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> แท็ก  ไม่ได้อยาก muck เกี่ยวกับแท็กใช้ได้ img อื่น ๆ (ซึ่งมีเป็นจำนวนมาก).  บิตนี้ของ jQuery ได้หลอกลวง:

<สคริปต์ชนิด = "ข้อ ความ/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></สคริปต์>

<สคริปต์ชนิด = "ข้อ ความ/javascript">
     $(เอกสาร).พร้อม(ฟังก์ชัน () {

         $(' li.condition > ใช้ได้ img').แต่ละ(ฟังก์ชัน (ดัชนี, สินค้า)
           
{
             $(สินค้า).css("ความกว้าง", "60"); 
             $(สินค้า).css("ความสูง", "50");
            });
     }); // เมื่อโหลดเอกสาร
</สคริปต์>

บิตของรหัสที่ค้นหาคอลเลกชัน <li> แท็กคลาสซึ่งเป็น "เงื่อนไข" และ <img> เด็ก  จากนั้นจะคำนวณซ้ำทั้งหมดที่  ทำงานเหมือนเสน่ห์.

ผมคงไม่สามารถปรับปรุงมัน, แต่ไม่ได้เป็นชนิดของ unix คนที่แก้ไขπ ถึง 18 ตัวเลขแม่นยำใช้ได้ทำให้ภาษาออว์ค และผมไม่ว่าถ้า jQuery guy อย่างใดอย่างหนึ่ง ยิ้ม.

</สิ้นสุด>

สมัครสมาชิกไปยังบล็อกของฉัน.

ทำตามฉันใน Twitter ที่ http://www.twitter.com/pagalvin

ทิ้งคำตอบไว้

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่. ช่องที่ต้องการถูกทำเครื่องหมาย *