Gebruiker: Bmulckhu: verschil tussen versies

Versie van 20 mei 2019 om 18:17

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

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:

@@ Regel 33: / Regel 33: @@
 .crop-1 {
-max-width: 200px;
+    width: 150px;
-max-height:200px;
+    height: 300px;
-overflow: hidden;
+    overflow: hidden;
-margin-top:-50%;
+}
-margin:-50%;
+.crop-1 img {
+    width: 400px; /* totale breedte van afbeelding achter clipping mask */
+    height: 300px; /* totale hoogte van afbeelding achter clipping mask */
+    margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */
+}
+.crop-2 {
+    width: 150px;
+    height: 300px;
+    overflow: hidden;
+}
+.crop-2 img {
+    margin: -100px 0 0 -50px; /* afsnijden van boven, afsnijden van links */
 }
-.crop-1 img { max-width: initial; /* Maybe optional. See note below */ }
 }}
 [[Bestand: Community02.png|300px|thumb|Werkt niet...|class=insetrectangle-40-40-40-40]]
@@ Regel 49: / Regel 62: @@
 Met clipping blijft de afbeeldingen even groot... er ontstaat een witte rand.
+Met behulp van CSS-cropping kan de afbeelding worden bijgesneden.
 <div class="crop-1">
 [[Bestand: Community02.png]]
+</div>
+Met behulp van de wikitekst:
+<div class="crop-2">
+[[Bestand: Community02.png|400px]]
 </div>