Hata hivyo Zaidi jQuery–Resize Mfano Image

Mimi kurithi sehemu ya mtandao kutoka muuzaji mteja wa zamani na ina picha kwa ukubwa tatizo.  images lazima 60×50 lakini kwa sababu fulani isiyo ya kawaida, muuzaji awali kuwalazimisha ndani ya 42×42, hivyo wao kuangalia squashed:

 

Nzuri Image

Mbaya Image

Hapa ni ghafi (kiasi fulani kilichorahisishwa):

<meza darasa = 'extended-mtazamo'>
  <thead>
    <tr>
      <th  width = '100′>3 Jumanne</th>
    </tr>
  </thead>

  <tbody>
    <tr darasa = 'utabiri'>
      <td width = '100′>
        <st>
          <li darasa = 'juu'>High: 72&wewe;F</li>
          <li darasa = 'Asili'>Asili: 44&wewe;F</li>
          <li darasa = 'hali'>Jua
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ urefu = '42’ alt =” />
          </li>
        </st>
      </td>
    </tr>

  </tbody>

</meza>

Utasikia kumbuka kwamba ingawa njia ya picha yenyewe inaonyesha mwelekeo sahihi (60×50) muuzaji awali ya kulazimishwa katika 42×42.  Kwa nini?  Crazy.

Anyway, Nilitaka ufumbuzi wa haraka na rahisi ya suala hili na mimi akageuka na jQuery.  hila mara ya Machapisho yote ya mwafaka <img> vitambulisho.  Mimi sitaki muck kuhusu na vitambulisho nyingine yoyote img (ambayo kuna wengi).  Hii kidogo ya jQuery alifanya hila:

<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
     $(hati).tayari(kazi () {

         $(‘li.condition > img ').kila(kazi (index, bidhaa)
           
{
             $(bidhaa).css("width", "60"); 
             $(bidhaa).css("height", "50");
            });
     }); // juu ya mzigo hati
</script>

Kwamba kidogo ya maadili ya hupata ukusanyaji <li> vitambulisho ambaye darasa ni "hali" na <img> watoto.  Ni kisha iterates njia zote ya kwamba.  Kazi kama charm.

Mimi inaweza pengine ni kuhuisha, lakini mimi kamwe alikuwa aina ya guy Unix kwamba kutatuliwa π kwa 18 maadili usahihi kwa kutumia sed na awk na mimi si kwamba aina ikiwa jQuery guy ama Smile.

</mwisho>

Kujiunga na blog yangu.

Kufuata yangu juu ya Twitter kwa http://www.twitter.com/pagalvin

Kuondoka Reply

Anwani yako si kuchapishwa. Mashamba required ni alama *