[html/css/javascript] Max width en height in <img> tag?

[kramer65]

Hallo,

Ik ben bezig met een foto site waarop een willekeurige afbeelding op de voorpagina staat. Nu zijn alle afbeeldingen van verschillende groottes en vooral van verschillende afmetingen. De een is dus 60x600 en de andere 600x60.

Ik wil nu dat die afbeeldingen niet te groot worden op de pagina, en zodoende heb ik een max ingesteld zo: <img src=... height=100> .Zo worden alle afbeeldingen van 60x600 netjes 10x100, maar alle afbeeldingen van 600x60 blijven hoe ze zijn.

Dus kan je dit doen: <img src=... height=100 width=100>
Dan echter, worden alle afbeeldingen precies 100x100, wat ik ook niet wil.

Ik probeer dus een maximale breedte EN een maximale hoogte te krijgen, terwijl de dimensies van de afbeelding behouden moet blijven. De 60x600 moet dus 10x100 worden en de 600x60 moet 100x10 worden.

Ik heb even naar wat javascriptjes gekeken, maar die doen ook niet echt wat ik wil. Daarbij ben ik redelijk hulpeloos met javascript...


Heeft iemand een tip hoe ik dit voor elkaar kan krijgen?

[ Voor 1% gewijzigd door BtM909 op 14-05-2009 15:46 ]

[BtM909]

Heb je met CSS al de max-height en max-width proberen te zetten?

[OkkE]

Je zou eens kunnen kijken naar de max-width en max-height properties van CSS (maar die werken niet in IE6).

[RobIII]

Je wil zowieso het resizen niet aan je browser overlaten. Los van de karige(re) resultaten dan een fatsoenlijke resize zal doen biedt je ook nog eens onnodig grote(re) bestanden aan je bezoekers aan die ze vervolgens maar op X % zien. Wat jij wil is zorgen dat de foto's server-side geresized worden (of door jezelf, door meteen de juiste maat te uploaden).

[ Voor 20% gewijzigd door RobIII op 14-05-2009 14:35 ]

[steffex]

De max-height en width werken in heel IE niet, misschien 8 wel, maar 6 en 7 echt niet. (bron: w3schools)

het is beter om deze afbeelding of zelf om te zetten naar een goed formaat of je zult via een php/asp script de foto's laten resizen zoals RobIII al zegt is het resultaat van de browser altijd slechter.

[kramer65]

Tja, daar zit wat in..

Maar het probleem is dat ik deze zaak gedeeltelijk zelf schrijf (voorpagina), terwijl de afbeeldingen uiteindelijk worden weergegeven door een pixelpost (hier).

Dat heb ik zo gedaan zodat het uploaden van de afbeeldingen ook makkelijker gaat. Ik maak namelijk liever foto's dan dat ik elke keer mn ftp programma erbij wil pakken (soms niet echt mogelijk als je in de boesj boesj zit).

Ik kan natuurlijk wel zo'n php-script laten lopen en dan met een cron-job elke 5 minuten laten checken of alle afbeeldingen in een bepaalde map nog wel een max hebben van 100..?

Probleem is daarbij weer dat als ik iets in pixelpost weghaal, het natuulijk niets weghaalt uit de map die ik speciaal heb opgezet met ge-resizede afbeeldingen..

_{kramer65 haat voorgeschreven scripts als pixelpost maar is te lui om alles zelf te doen...}

[kramer65]

Tja.


Na even nagedacht te hebben over de oplossingen ga ik denk ik voor het volgende; Ik maak een nieuwe map waarin ik de foto's die op de voorpagina mogen komen zelf manueel ge-resize-d upload. Zo heb ik ook nog eens controle over welke foto's op de voorpagina komen..



Dank voor alle tips iig!

[Miyamoto]

Is phpThumb niets?
Ik vind het zelf een ideaal script! Veel instellingen, makkelijk toepasbaar.

[OkkE]

stef-o schreef op donderdag 14 mei 2009 @ 14:35:
De max-height en width werken in heel IE niet, misschien 8 wel, maar 6 en 7 echt niet. (bron: w3schools)

het is beter om deze afbeelding of zelf om te zetten naar een goed formaat of je zult via een php/asp script de foto's laten resizen zoals RobIII al zegt is het resultaat van de browser altijd slechter.

Werkt hier anders prima in IE7 icm een Strict doctype.

Verder ben ik het met iedereen eens dat het eigenlijk beter zou zijn om het via een server-side script aan te passen.

[kramer65]

Ik heb zojuist phpThumb eens gedownload...

Misschien is dat idd wel wat..

[kramer65]

rooot

phpThumb is exact precies juist wat ik nodig heb! Simpel en doet wat ik wil!

Waaanzinnig bedankt voor de tip rooot!

Ook de anderen bedankt uiteraard voor alle tips!
snip: voegt niks toe aan het probleem of de oplossing

[ Voor 21% gewijzigd door BtM909 op 14-05-2009 15:46 ]