Stijl tabblad – grootte

De afmetingscontrole stelt de hoogte en breedte van een element in.

Er zijn drie types afmetingsinstellingen:

• Ongewijzigd: De hoogte en breedte van het element onder normale omstandigheden. Deze instelling laat de inhoud de elementgrootte bepalen.  
• Min: De kleinste breedte waartoe een element kan krimpen, zelfs als de inhoud erin of de omringende lay-out suggereert dat het kleiner zou moeten zijn. Helpt bij het in balans brengen van ontwerp met responsiviteit.  
• Max: De grootste breedte waartoe een element kan groeien, zelfs als het scherm of de inhoud toestaat dat het groter is. Helpt bij het in balans brengen van ontwerp met responsiviteit.
• Overflow: Als de inhoud van het element te groot is voor het element, kun je de overflow instellen op:
  • Zichtbaar: De inhoud is zichtbaar, ook al bevindt deze zich buiten de grenzen van het element.
  • Verborgen: Inhoud buiten de grenzen van het element is verborgen.
  • Auto: Inhoud buiten de grenzen van het element kan worden bekeken door te scrollen.

De afmeting van een element wijzigen

In het onderstaande voorbeeld maken we een afbeelding die responsief zal zijn en binnen de ontwerpbeperkingen blijft.

Om de hoogte en breedte van het element in te stellen:

1. Open de Elementor-editor.
   
2. Voeg een Div-blok toe aan het canvas.
   
3. Sleep een Afbeelding-element in het Div-blok.
   
   De opties voor het Afbeelding-element zouden in het paneel moeten verschijnen.
   
4. Voeg een afbeelding toe aan de widget. Voor details, zie Afbeeldingen en iconen toevoegen.  
   
5. Klik op het tabblad Stijl.
   
6. Open het veld Afmeting. 
   
7. Stel de standaardbreedte in op 50% zodat de elementgrootte zich aanpast op basis van de bovenliggende container. 
8. Stel de minimumbreedte in op 200px om te voorkomen dat de afbeelding te klein wordt. 
9. Stel de maximumbreedte in op 600px om ervoor te zorgen dat deze niet buiten proportie wordt uitgerekt.
10. Laat de standaardhoogtes ongewijzigd.
    
    Dit creëert een afbeelding die er goed uitziet op verschillende schermformaten.

Behoud afbeeldingsproporties met object fit

Het tabblad Afmeting heeft een speciale besturing, voornamelijk gebruikt voor afbeeldingen, ontworpen om de verhoudingen van de inhoud van het element te behouden, genaamd Object fit.

Om Object fit te gebruiken:

1. Voeg een afbeelding toe aan het canvas met het Afbeelding-element.
   
   De besturingselementen verschijnen in het linkerpaneel.
   
2. Klik op het tabblad Stijl.
3. Open het veld Afmeting en wijzig de afbeeldingsgrootte.
   
   In dit voorbeeld hebben we de afbeeldingshoogte gewijzigd, wat de afbeelding heeft vervormd.
   
4. Klik in het paneel op Meer weergeven.
   
5. Gebruik de Object fit dropdown om een van de opties te kiezen:
   • Vullen:
     
     De afbeelding vult het gebied zoals je het hebt ingesteld.
   • Bedekken:
     
     De afbeelding behoudt zijn originele deel, maar slechts een deel ervan is zichtbaar. Als je Bedekken selecteert, verschijnt het menu Object positie en kun je het gebruiken om te bepalen welk deel van de afbeelding zichtbaar is.
   • Bevatten:
     
     Past je afbeelding aan zodat deze in het element past terwijl de verhoudingen behouden blijven. Als je Bevatten selecteert, verschijnt het menu Object positie en kun je het gebruiken om de positie van de afbeelding binnen het element te bepalen.
   • Geen:
     
     Gebruikt de standaardinstellingen van de afbeelding. Als delen van de afbeelding niet zichtbaar zijn, gebruik dan de Object positie-instellingen om te bepalen welk deel van de afbeelding zichtbaar zal zijn.
   • Schaal omlaag:
     
     Schaalt de afbeelding naar beneden zodat deze zijn verhoudingen behoudt maar binnen je element past. Als je Schaal omlaag selecteert, verschijnt het menu Object positie en kun je het gebruiken om de positie van de afbeelding binnen het element te bepalen.

De beeldverhouding van een afbeelding of video wijzigen

De beeldverhouding is de proportionele relatie tussen de breedte en hoogte, meestal uitgedrukt als twee getallen gescheiden door een dubbele punt (bijv. 16:9). Dit is vooral van toepassing op afbeeldingen en video’s. Je kunt de beeldverhouding regelen met het tabblad Afmeting.

Om de beeldverhouding van een video of afbeelding te wijzigen:

1. Voeg een afbeelding toe aan het canvas met het Afbeelding-element.
   
   De besturingselementen verschijnen in het linkerpaneel.
   
2. Klik op het tabblad Stijl.
   
3. Open het veld Afmeting.
   
4. Klik op Meer weergeven.
   
5. Gebruik de dropdown Beeldverhouding om een beeldverhouding te selecteren of gebruik de Aangepaste instelling om je eigen beeldverhouding in te stellen.