Gebruiker: Bmulckhu: verschil tussen versies
Uit MediaWikiGids
| Regel 105: | Regel 105: | ||
}} | }} | ||
</pre> | </pre> | ||
| + | {{crop | ||
| + | |vlgnr=3 | ||
| + | |bestand=Community02.png | ||
| + | |breedte=150px | ||
| + | |hoogte=300px | ||
| + | |schaal= 400px | ||
| + | |van_boven=100px | ||
| + | |van_links=50px | ||
| + | }} | ||
Versie van 20 mei 2019 om 20:44
Bart Mulckhuijse - Beheerder van MediaWikiGids
Enkele tests met clipping:
Bron: https://css-tricks.com/clipping-masking-css/
NB: Let op de -webkit- prefix om de styling ook in Safari browser toe te passen
Om niet steeds (en site-wide) CSS aan Mediawiki:Tweeki.css toe te hoeven voegen, kunt je ook het widget:Style-1 gebruiken.
Cropping
Met clipping blijft de afbeeldingen even groot... er ontstaat een witte rand. Met behulp van CSS-cropping kan de afbeelding worden bijgesneden.
Met behulp van de wikitekst:
.crop-2 {
width: 150px;
height: 300px;
overflow: hidden;
}
.crop-2 img {
margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */
}
en
<div class="crop-2"> [[Bestand: Community02.png|400px]] </div>
Resultaat:
Idee: Dit kan netjes in een sjabloon worden samengevoegd:
{{crop
|vlgnr=2
|bestand=Community02.png
|breedte=150px
|hoogte=300px
|schaal= 400px
|van_boven=100px
|van_links=50px
}}