info
Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Vraag over schermhoogte
2 views
Skip to first unread message
Sjoerd
Feb 12, 2022, 7:45:14 AM2/12/22
to
Stel, ik plaats een afbeelding direct in de body, met een breedte van 100%:
<body>
<img src="afbeelding.jpg" alt="" style="width:100%">
</body>
De afbeelding strekt zich nu over de hele breedte van het scherm uit.
Wanneer ik nu 'width' vervang door 'height', dan zou je verwachten dat de
afbeelding zich over de hele hoogte van het scherm uitstrekt.
Maar nee, dit werkt niet.
Is er een manier bekend om dit toch te bewerkstelligen?
Ik kom dit tegen bij het maken van een fotoviewer. De bedoeling is om foto's
met verschillende breedte-/hoogteverhoudingen op elk scherm optimaal weer te
geven.
<body>
<img src="afbeelding.jpg" alt="" style="width:100%">
</body>
De afbeelding strekt zich nu over de hele breedte van het scherm uit.
Wanneer ik nu 'width' vervang door 'height', dan zou je verwachten dat de
afbeelding zich over de hele hoogte van het scherm uitstrekt.
Maar nee, dit werkt niet.
Is er een manier bekend om dit toch te bewerkstelligen?
Ik kom dit tegen bij het maken van een fotoviewer. De bedoeling is om foto's
met verschillende breedte-/hoogteverhoudingen op elk scherm optimaal weer te
geven.
robert
Feb 12, 2022, 10:56:42 AM2/12/22
to
Sjoerd <x...@xx.invalid>:
niet "neem 100% van de hoogte van het scherm in".
> Is er een manier bekend om dit toch te bewerkstelligen?
Een mogelijkheid is om deze style toe te voegen:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
Zo wordt de parent van je <img> (namelijk <body>) 100% van de hoogte van
díe parent (namelijk <html>) en die neemt de hele hoogte in beslag.
Een andere mogelijkheid is om de <img> "los te koppelen" van de parent door
'm absoluut te positioneren:
<img src='afbeelding.jpg' style='height: 100%; position: absolute'>
Het heeft wel allemaal z'n voordelen én z'n nadelen.
--
robert
> Stel, ik plaats een afbeelding direct in de body, met een breedte van 100%:
>
> <body>
> <img src="afbeelding.jpg" alt="" style="width:100%">
> </body>
>
> De afbeelding strekt zich nu over de hele breedte van het scherm uit.
> Wanneer ik nu 'width' vervang door 'height', dan zou je verwachten dat de
> afbeelding zich over de hele hoogte van het scherm uitstrekt.
> Maar nee, dit werkt niet.
"height: 100%" betekent "neem 100% van de hoogte van het parent element in",
>
> <body>
> <img src="afbeelding.jpg" alt="" style="width:100%">
> </body>
>
> De afbeelding strekt zich nu over de hele breedte van het scherm uit.
> Wanneer ik nu 'width' vervang door 'height', dan zou je verwachten dat de
> afbeelding zich over de hele hoogte van het scherm uitstrekt.
> Maar nee, dit werkt niet.
niet "neem 100% van de hoogte van het scherm in".
> Is er een manier bekend om dit toch te bewerkstelligen?
html, body {
padding: 0;
margin: 0;
height: 100%;
}
Zo wordt de parent van je <img> (namelijk <body>) 100% van de hoogte van
díe parent (namelijk <html>) en die neemt de hele hoogte in beslag.
Een andere mogelijkheid is om de <img> "los te koppelen" van de parent door
'm absoluut te positioneren:
<img src='afbeelding.jpg' style='height: 100%; position: absolute'>
Het heeft wel allemaal z'n voordelen én z'n nadelen.
--
robert
Sjoerd
Feb 12, 2022, 4:10:43 PM2/12/22
to
robert:
> Sjoerd:
Wat ik bij nader inzien nog even op wou merken: in plaats van schermbreedte
en -hoogte werd eigenlijk bedoeld: breedte en hoogte van het browservenster,
ook 'viewport' genoemd.
Maar het blijkt te werken. Mijn dank, weer wat geleerd.
Wel bevinden de afbeeldingen zich in een div, deze weer in een andere div,
en deze in de body. Je moet dus zowel de html, de body als die twee div's een
hoogte van 100% geven, maar dan werkt het ook.
Ik vond trouwens ook een image viewer als jQuery-toepassing:
https://plugins.jquery.com/fotorama/
Homepage: https://fotorama.io
Op die homepage zie je een demo, en de installatie-instructies en de
configuratie-opties zijn erg eenvoudig te volgen, en ook hier kun je de
foto's optimaal in de viewport weergeven, dus met maximale hoogte of breedte.
Nadeel van zoiets vind ik alleen dat je niet meer begrijpt hoe het werkt,
dus mis je een stuk vrijheid. De manier waarop eventuele onderschriften
('captions') worden weergegeven, vind ik bijvoorbeeld niet zo fraai, maar om
dit te veranderen, moet je in de code omwroeten, en dat is toch wel haast
ondoenlijk.
> Sjoerd:
en -hoogte werd eigenlijk bedoeld: breedte en hoogte van het browservenster,
ook 'viewport' genoemd.
Maar het blijkt te werken. Mijn dank, weer wat geleerd.
Wel bevinden de afbeeldingen zich in een div, deze weer in een andere div,
en deze in de body. Je moet dus zowel de html, de body als die twee div's een
hoogte van 100% geven, maar dan werkt het ook.
Ik vond trouwens ook een image viewer als jQuery-toepassing:
https://plugins.jquery.com/fotorama/
Homepage: https://fotorama.io
Op die homepage zie je een demo, en de installatie-instructies en de
configuratie-opties zijn erg eenvoudig te volgen, en ook hier kun je de
foto's optimaal in de viewport weergeven, dus met maximale hoogte of breedte.
Nadeel van zoiets vind ik alleen dat je niet meer begrijpt hoe het werkt,
dus mis je een stuk vrijheid. De manier waarop eventuele onderschriften
('captions') worden weergegeven, vind ik bijvoorbeeld niet zo fraai, maar om
dit te veranderen, moet je in de code omwroeten, en dat is toch wel haast
ondoenlijk.
0 new messages