Ainda mais jQuery–Redimensionar um exemplo de imagem

Eu herdei uma web part de fornecedor antigo do cliente e tem um problema de tamanho de imagem.  As imagens devem ser 60×50 mas por algum motivo estranho, o fornecedor original forçou-os em 42×42, para que eles tenham aparência achatados:

 

Boa imagem

Imagem ruim

Aqui está a marcação (um pouco simplificado):

<classe de tabela = 'estendido-outlook'>
  <thead>
    <TR>
      <th  largura = 100′>3 Terça-feira</th>
    </TR>
  </thead>

  <tbody>
    <Classe TR = 'tempo'>
      <largura de TD = 100′>
        <UL>
          <Classe Li = 'alta'>Alta: 72&deg;F</Li>
          <Classe Li = 'baixa'>Baixo: 44&deg;F</Li>
          <Classe Li = 'condição'>Ensolarado
            <img src =’
http://deskwx.WeatherBug.com/images/Forecast/Icons/localized/60×50/en/trans/cond007.png’ Largura = 42’ altura = 42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</tabela>

Você notará que, embora o caminho para a própria imagem mostra a dimensão adequada (60×50) o fornecedor original forçou-42.×42.  Por que?  Louco.

De qualquer forma, Eu queria uma solução rápida e fácil para esse problema e eu me virei para jQuery.  O truque foi localizar todos os apropriado <img> marcas de formatação.  Eu não queria Muck com quaisquer outras tags img (de que há muitos).  Este pouco de jQuery feito a manha:

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

<script type = "text/javascript">
     $(documento).pronto(função () {

         $(' li.condition > img').cada(função (índice, item de)
           
{
             $(item de).CSS("largura", "60"); 
             $(item de).CSS("altura", "50");
            });
     }); // carga do documento
</script>

Esse pedaço de código localiza a coleção <Li> marcas cuja classe é "condição" e <img> crianças.  Ele, em seguida, itera Tudo isso.  Trabalhou como um encanto.

Eu provavelmente poderia simplificar ele, mas eu nunca fui um o tipo de cara de unix que resolveu π Para 18 precisão de dígitos usando sed e awk e eu não sou desse tipo se jQuery cara quer Sorriso.

</fim>

Subscreva ao meu blog.

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

Deixar uma resposta

seu endereço de e-mail não será publicado. Campos obrigatórios são marcados *