afbeeldingen fullscreen plaatsen

Status
Niet open voor verdere reacties.
G

gibsonneke

Gebruiker
Lid geworden
19 mei 2009
Berichten
33
Ik heb sinds kort een soort van digital signage applicatie in php ontwikkeld waarbij er kort gezegd aan de ene kant foto's upgeload worden en deze weergegeven worden aan de andere kant.

Nu ben ik bezig aan de laatste details en heb ik nog enkele problemen.

Omdat foto's in een bepaalde verhouding upgeload kunnen worden (16:9 of 4:3) en het scherm ook in een bepaald formaat is (16:9 of 4:3) Kan de weergave van foto's toch wel wat verschillen.

Mijn vraag is dan ook hoe ik dit goed kan plaatsen zodat alle afbeeldingen goed weergegeven worden onafhankelijk van het formaat van de content of van het scherm.

Een oplossing zou zijn om automatische witruimte toe te voegen aan een foto indien de foto 16:9 is en het scherm 4:3 is.

Echter ben ik er niet helemaal uit. Iemand een oplossing?
 
Als je alleen de width of height instelt, wordt de andere automatisch op dezelfde schaal meevergroot, volgensmij.

Dan zal ie dus nooit in een andere verhouding weergegeven worden.
 
Frats zei:
Als je alleen de width of height instelt, wordt de andere automatisch op dezelfde schaal meevergroot, volgensmij.

Dan zal ie dus nooit in een andere verhouding weergegeven worden.
Klik om te vergroten...

Ja dat is inderdaad zo maar misschien zal ik even ter verduidelijking de situatie schetsen.

Op dit moment is het zo dat ik afbeeldingen upload in de back-end en deze in de front-end weergeef. Voor de weergave van de afbeeldingen in de front-end wordt de hoogte en breedte van de afbeelding gelijk gesteld aan de hoogte en breedte van het scherm waarop het draait.

Hierdoor gaan de afbeeldingen in alle situaties wel full screen maar krijg ik toch wat problemen indien ik een afbeelding in resolutie 1024 x 768 (formaat 4:3 dus) fullscreen op een scherm met verhouding 16:9 probeer te projecten. Dit probleem is nl. dat de afbeelding uitgerokken wordt tot de breedte van het scherm.

De oplossing zou dus moeten zijn indien mijn afbeelding 4:3 is:
- als het scherm 4:3 is toon dan de afbeelding fullscreen
- als het scherm 16:9 is centreer dan de afbeelding tot het midden van het scherm dat het niet uitgerokken wordt weergegeven. Witruimte aan linker- en rechterkant. (of zoom in op de afbeelding zodat het wel full screen blijft)

Indien mijn afbeelding 16:9 is
- als het scherm 4:3 is toon dan de afbeelding gecentreed tussen de boven en onderkant met witruimte aan boven en onderkant. (ideaal zou zijn om in te zoomen op afbeelding zodat deze full screen weergegeven wordt)
- als het scherm 16:9 dan kan de afbeelding zonder probleem op het volledig scherm weergegeven worden.

Wat ik mij dus afvraag is hoe ik de afbeelding mooi centreer (of nog beter hoe ik kan gaan inzoomen op een bepaald gedeelte van de afbeelding, een soort van croppen dus)?
 
Ja, dat klopt. Als je alleen de width zet, zal de height in dezelfde schaal meerekken. Je kan overgens met Javascript de schermhoogte/breedte ophalen.


edit:

Mischien werkt dit. Zet de 'width' van het plaatje op 100%. Verder zet je, dmv. css, het plaatje verticaal goed neer via 'vertical-align: middle'.
zoiets:
HTML: 
<html>
<head>
<style>
body{
   vertical-align: middle;
}
</style>
</head>
<body>
<img src='something.jpg' width='100%' />
</body>
</html>
 
Laatst bewerkt:
Vegras zei:
Ja, dat klopt. Als je alleen de width zet, zal de height in dezelfde schaal meerekken. Je kan overgens met Javascript de schermhoogte/breedte ophalen.


edit:

Mischien werkt dit. Zet de 'width' van het plaatje op 100%. Verder zet je, dmv. css, het plaatje verticaal goed neer via 'vertical-align: middle'.
zoiets:
HTML: 
<html>
<head>
<style>
body{
   vertical-align: middle;
}
</style>
</head>
<body>
<img src='something.jpg' width='100%' />
</body>
</html>
Klik om te vergroten...

Dit is dan enkel van toepassing wanneer ik een afbeelding in 16:9 formaat wil projecteren op een scherm van 4:3. Enig idee hoe ik het kan doen wanneer ik een afbeelding van 4:3 wil projecteren op een scherm van 16:9?

Bestaat er een script om file dus afbeelding op te halen en daarvan de hoogte en breedte te achterhalen?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan