[html] tabel wordt uitgerekt door plaatje

[iivvvii]

ik heb dus een tabel meet een breedte van 300 px. Hier wordt met behulp van javascript ( document.images.foto.src=naam; ) een plaatje ingeladen als je op volgende klikt.

Als dat plaatje groter is dan 300 px dan wordt de tabel uitgerekt en dat is niet de bedoeling. Weet iemand hoe ik kan zorgen dat de tabel op 300 px blijft staan

[Verwijderd]

zorgen dat de te importeren plaatjes <300 px zijn ?!

[Paitor]

iivvvii schreef op 19 december 2003 @ 13:24:
ik heb dus een tabel meet een breedte van 300 px. Hier wordt met behulp van javascript ( document.images.foto.src=naam; ) een plaatje ingeladen als je op volgende klikt.

Als dat plaatje groter is dan 300 px dan wordt de tabel uitgerekt en dat is niet de bedoeling. Weet iemand hoe ik kan zorgen dat de tabel op 300 px blijft staan

Kan je niet forced resizen in JS?

in de zin van: document.images.foto.height='300';?

edit:
Ah tis ook al met embedded style tags mogelijk

[ Voor 13% gewijzigd door Paitor op 19-12-2003 13:33 ]

[Rickets]

HTML:

<table style="table-layout: fixed;">

[OnTracK]

style="maxwidth: 300px;"

[ Voor 23% gewijzigd door OnTracK op 19-12-2003 13:32 ]

[iivvvii]

ik heb foto's van 3:4 en 4:3. Nu zijn de foto's die rechtop staan groter dan de gene die liggen. Degene die liggen hebben een width van 300 nodig en de gene die staan een height van 300. misschien is het zo wat duidelijker hoop ik

[Willem]

img als background-image gebruiken

[iivvvii]

willem169 schreef op 19 december 2003 @ 13:35:
img als background-image gebruiken

ja, en wat voor javascript moet ik dan gebruiken om het plaatje te veranderen

[iivvvii]

iivvvii schreef op 19 december 2003 @ 13:39:
[...]


ja, en wat voor javascript moet ik dan gebruiken om het plaatje te veranderen

dat werkt trouwens niet eens, want dan zie je maar een klein stukje van het plaatje

[semicon]

<td id="blaat"> .... ->

ergens in de js.

blaat.style.background ='plaajte?';

[crisp]

je kan het plaatje preloaden, en als het geladen is de width en height bepalen. Als width > height zet je width:300px en height:auto op je image en anders andersom

[Rickets]

Hoi

quote: http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

[Skaah]

OnTracK schreef op 19 december 2003 @ 13:32:
style="maxwidth: 300px;"

HTML:

<div style="max-width: 300px;">

Werkt niet in IE.

[OnTracK]

JavaScript:

function Replace() // zoiets heb je al
{    document.images.foto.src = naam;
     document.images.foto.width = '';  // reset de waarden zodat ze niet van het 
     document.images.foto.height = ''; // vorige plaatje afhangen (werkt dit?)

     if (document.images.foto.width > document.images.foto.height)
     {    document.images.foto.width = '400';
          document.images.foto.height = '300';
     } else
     {    document.images.foto.width = '300';
          document.images.foto.height = '400';
     }
}

geen idee of het werkt, was even een idee

EDIT:
en toen had crisp het ook al bedacht...

[ Voor 19% gewijzigd door OnTracK op 19-12-2003 13:49 ]

[crisp]

de width en height van het plaatje kan je in script pas uitvragen als hij volledig geladen is; je zou het onload event hiervoor kunnen gebruiken, of een loopje met een timeout die de complete property checked.

[semicon]

code:

<script>
maxheight = "200px";
maxwidth = "300px";
if (document.getElementById("jeplaatje").style.width >= maxwidth) {
    document.getElementById("jeplaatje").style.width = maxwidth;
}

if (document.getElementById("jeplaatje").style.width >= maxwidth) {
    document.getElementById("jeplaatje").style.height = maxheight;
}
</script>

Had toch even niks te doen :-)


dan moet je <img> - tag wel een ID hebben

[ Voor 18% gewijzigd door semicon op 19-12-2003 13:57 ]

[Verwijderd]

background-image lijkt me de oplossing.

[Justice]

Je wilt plaatjes inlaaden die groter zijn dan 300px, maar in de html pagina niet EN er mag geen informatie wegvallen. Dus met andere woorden, eigenlijk wil je ze resizen?
Lekker nuttig, zit je allemaal informatie voor niets te downloaden, tenzij je ze door een php script laat resizen, en dat is weer overkill..

Dus wat overblijft:
background img,
je images fysiek gaan resizen.
of uitleggen hoe je het nu precies zou willen hebben..