Gebruiker: Bmulckhu

Uit MediaWikiGids
Versie door Bmulckhu (Overleg | bijdragen) op 20 mei 2019 om 22:04

Ga naar: navigatie, zoeken

Bart Mulckhuijse - Beheerder van MediaWikiGids

Mijn persoonlijke website

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

Community02.png Community02.png

Community02.png

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

Community02.png

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:

Community02.png


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
}}
Community02.png