Am moştenit o parte web de la un client vechi furnizor si are o problema cu marimea imaginii. Imaginile ar trebui să fie 60×50 dar pentru un motiv ciudat, producătorul original le forţat în 42×42, astfel încât acestea uita strivită:
Bună imagine |
Bad Image |
Aici este markup (oarecum simplificată):
<tabelul clasa = "extins-outlook">
<tHead>
<TR>
<th latime ='100′>3 Marţi</th>
</TR>
</tHead><tBody>
<TR clasa = "previziuni">
<TD lăţime ='100′>
<ul>
<li clasa = 'mare'>Mare: 72°F</li>
<li clasa = 'mici'>Low: 44°F</li>
<li clasa = 'stare'>Însorit
<img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ latime ='42’ inaltime ='42’ alt =” />
</li>
</ul>
</TD>
</TR></tBody>
</tabel>
Veţi notă că chiar dacă calea către imaginea în sine Afişează dimensiunea corectă (60×50) producătorul original forţat-o în 42×42. de ce? nebun.
Oricum, Am vrut o soluţie rapidă şi uşoară la această problemă şi am apelat la jQuery. Trucul a fost de a localiza toate corespunzătoare <IMG> Tag-uri. Nu am vrut să muck despre cu orice alte img tag-uri (din care există multe). Acest pic de jQuery a făcut truc:
<script-ul de tip = text/javascript"" src ="http://AJAX.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></script-ul>
<script-ul de tip = "text/javascript">
$(document).gata(funcţia () {$("li.condition > img ").fiecare(funcţia (Indicele, element)
{
$(element).CSS("lăţime", "60");
$(element).CSS("înălţime", "50");
});
}); // pe documentul de încărcare
</script-ul>
Că pic de cod constată Colectia <li> Tag-uri ale căror clasă este "stare" şi <IMG> copii. Acesta reiterează apoi prin toate că. Worked asemãnãtor un acuzaþie.
Eu, probabil, ar putea simplifica l, dar niciodată nu a fost un fel de tip unix care π a rezolvat pentru a 18 cifre precizie folosind sed şi awk şi eu nu sunt ca un fel, în cazul în care jQuery tip fie .
</scop>
Urmaţi-mă pe Twitter, la http://www.twitter.com/pagalvin