Avatar billede kbonline Nybegynder
18. juni 2009 - 08:55 Der er 1 kommentar

Tilpas billede til tabelcelle uden at ødelægge proportioner

Tilpasse billede til tabel celle uden at ødelægge proportioner.

Jeg skal have indsat en masse billeder i en tabel, men de har forskellige proportioner, nogle er i højformat og nogle i tværformat.

Kan man tilpasse dem med et javascript så billede cellen er 150x150 px, og billedet så tilpasses efter den længste del, men ikke ødelægger proportionerne ?

Her er lidt tabelkode som måske kan forklare mit problem:

<table border="1" width="600">
    <tr>
        <td height="150" width="150">
        <a hasbox="2" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; text-decoration: none; color: 484747" href="http://netcentret.dk/zenoelscootertaurus-p-440.html">
        <img title="Zeno EL-Scooter Taurus" height="93" alt="Zeno EL-Scooter Taurus" src="http://netcentret.dk/imagemagic.php?img=images/nyhedsbrev/politimotorcykellille.jpg&w=140&h=93&page=&new=0&qty=1&spec=&thumb=big&lang=danish&prname=9&price=9  " border="0" hasbox="2"></a></td>
        <td height="150">&nbsp;</td>
    </tr>
    <tr>
        <td height="150" width="150">
        <a hasbox="2" style="font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; text-decoration: none; color: 484747" href="http://netcentret.dk/slushicemaker-p-947.html">
        <img title="Slush Ice Maker" height="140" alt="Slush Ice Maker" src="http://netcentret.dk/imagemagic.php?img=images/TomTom/497863.jpg&w=140&h=140&page=&new=0&qty=1&spec=&thumb=big&lang=danish&prname=9&price=9  " border="0" hasbox="2"></a></td>
        <td height="150">&nbsp;</td>
    </tr>
    <tr>
        <td height="150" width="150"><img title="EL-løbehjul fighter (for de voksne)" height="210" alt="EL-løbehjul fighter (for de voksne)" src="http://netcentret.dk/imagemagic.php?img=images/fighter.jpg&w=140&h=210&page=&new=0&qty=1&spec=&thumb=big&lang=danish&prname=9&price=9  " border="0" hasbox="2"></a></td>
        <td height="150">&nbsp;</td>
    </tr>
    </table>
Avatar billede ebusiness Nybegynder
18. juni 2009 - 15:09 #1
Her er funktion til at skalere billeder, note, det er vigtigt at den først bliver kaldt når billedet er fuldt hentet, hvilket det bør være når onload funktionen kaldes.

<IMG id='demoImg' src="http://www.nasa.gov/images/content/264180main_sts126-s-002_425.jpg">
<script type="text/javascript">
function resize(image){
    var maxsize=Math.max(image.height,image.width)
    if(maxsize){
        var w=Math.round(image.width*150/maxsize)+"px"
        image.style.height=Math.round(image.height*150/maxsize)+"px"
        image.style.width=w
    }
}

function resizeimages(){
    resize(document.getElementById("demoImg"))
}

window.onload=resizeimages
</script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester