JQuery aínda máis–Redimensionar un exemplo de imaxe

Eu herdei unha parte web do antigo provedor de un cliente e el ten un problema de tamaño da imaxe.  As imaxes deben ser de 60×50 pero por algún motivo estraño, o provedor orixinal forzado los 42×42, para que queden esmagados:

 

Boa Imaxe

Bad Image

Aquí está o marcado (tanto simplificada):

<mesa class = "extended-Outlook '>
  <thead>
    <tr>
      <º  width = '100′>3 Martes</º>
    </tr>
  </thead>

  <tbody>
    <tr class = 'previsión'>
      <td width = '100′>
        <ª>
          <li class = "alto">Alto: 72&ti;F</li>
          <li class = 'baixa'>Baixo: 44&ti;F</li>
          <li class = 'condición'>Soleado
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ height = '42’ alt =” />
          </li>
        </ª>
      </td>
    </tr>

  </tbody>

</mesa>

Vai notar que, aínda que o camiño cara á propia imaxe amosa a dimensión axeitada (60×50) o provedor orixinal forzado en 42×42.  ¿Por que?  Tolo.

De calquera xeito, Eu quería unha solución rápida e fácil a esta cuestión e eu me virei para jQuery.  O truco era localizar as apropiado <img> etiquetas.  Eu non quería muck sobre con calquera outras etiquetas img (de que son moitos).  Este pouco de jQuery fixo o truco:

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

<script type="text/javascript">
     $(documento).preparado(función () {

         $(‘li.condition > img ').cada(función (índice, elemento)
           
{
             $(elemento).css("width", "60"); 
             $(elemento).css("height", "50");
            });
     }); // na carga documento
</guión>

Este anaco de código atopa a colección <li> marcas cuxa clase é "condición" e <img> nenos.  A continuación, el percorre todo isto.  Traballou como un encanto.

Eu probablemente podería acelerar isto, pero eu nunca fun un tipo de unix cara que resolveu π para 18 díxitos de precisión usando sed e awk, e eu non son ese tipo cara jQuery ou sorriso.

</final>

Rexístrate para o meu blog.

Siga-me no Twitter http://www.twitter.com/pagalvin

Deixe unha resposta

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados *