Gebruiker: Bmulckhu: verschil tussen versies
Uit MediaWikiGids
| Regel 31: | Regel 31: | ||
clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); | clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); | ||
} | } | ||
| + | |||
| + | .crop-1 { | ||
| + | max-width: 200px; | ||
| + | max-height:200px; | ||
| + | overflow: hidden; | ||
| + | margin-top:-50%; | ||
| + | margin:-50%; | ||
| + | } | ||
| + | .crop-1 img { max-width: initial; /* Maybe optional. See note below */ } | ||
}} | }} | ||
[[Bestand: Community02.png|300px|thumb|Werkt niet...|class=insetrectangle-40-40-40-40]] | [[Bestand: Community02.png|300px|thumb|Werkt niet...|class=insetrectangle-40-40-40-40]] | ||
| Regel 36: | Regel 45: | ||
[[Bestand: Community02.png|300px|thumb|Werkt zoals inset...|class=rect-2]] | [[Bestand: Community02.png|300px|thumb|Werkt zoals inset...|class=rect-2]] | ||
[[Bestand: Community02.png|300px|thumb|Werkt|class=star]] | [[Bestand: Community02.png|300px|thumb|Werkt|class=star]] | ||
| + | |||
| + | == Cropping == | ||
| + | |||
| + | Met clipping blijft de afbeeldingen even groot... er ontstaat een witte rand. | ||
| + | <div class="crop-1"> | ||
| + | [[Bestand: Community02.png]] | ||
| + | </div> | ||
Versie van 20 mei 2019 om 18:22
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.