Ek geërf het van 'n web deel van 'n kliënt se ou ondernemer en dit het 'n beeld grootte probleem. Die beelde is 60×50 maar vir sommige vreemd rede, die oorspronklike verskaffer gedwing om hulle in 42×42, so kyk hulle platgedruk:
|
N goeie beeld |
Slegte beeld |
 |
|
Hier is die winsgrens (ietwat vereenvoudigde):
<table class = "Gevorderde-vooruitsigte>
<thead>
<tr>
<ste width = '100′>3 Dinsdag</ste>
</tr>
</thead><tbody>
<tr class = "voorspelling">
<td width = '100′>
<Straat>
<li class = 'n hoë>Hoë: 72&jy;F</li>
<li class = "low">Lae: 44&jy;F</li>
<li class = "toestand">Sunny
<img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ hoogte = '42’ alt =” />
</li>
</Straat>
</td>
</tr></tbody>
</tafel>
Jy sal let dat hoewel die pad na die beeld self toon die korrekte dimensie (60×50) die oorspronklike verskaffer gedwing om dit in 42×42. Hoekom? Crazy.
In elk geval, Ek wou 'n vinnige en maklike oplossing vir hierdie kwessie en ek draai om jQuery. Die geheim is om almal op te spoor van die toepaslike <img> tags. Ek het nie wil die muck oor met enige ander img tags (wat daar is baie). Hierdie bietjie van die jQuery het die truuk:
<script type = "text / javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type = "text / JavaScript">
$(dokument).gereed(funksie () {$(‘li.condition > img ").elke(funksie (indeks, item)
{
$(item).css("Width", "60");
$(item).css("Hoogte", "50");
});
}); // dokument vrag
</script>
Daardie bietjie van die kode bevind dat die versameling <li> tags wie se klas is "toestand" en <img> kinders. Dit iterate dan deur alles. Soos 'n bom gewerk.
Ek kon dit waarskynlik meer vaartbelyn, maar ek was nog nooit die soort van die unix man wat opgelos π aan 18 syfers presisie met sed en AWK en ek is nie daardie soort indien jQuery man 
.
</einde>
Volg my op Twitter http://www.twitter.com/pagalvin
