Gebruiker: Bmulckhu: verschil tussen versies

Versie van 20 mei 2019 om 22:04

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.

Werkt niet...

Werkt zoals inset...

Werkt

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
}}

@@ Regel 112: / Regel 112: @@
 |schaal= 400px
 |van_boven=100px
-|van_links=150%
+|van_links=100px
 }}