Afbeelding passend maken schalen kader CSS object-fit

Logo cursus traing wordpress

Afbeelding passend maken schalen kader CSS object-fit

Afbeelding schalen passend maken in kader CSS met CSS

De object-fit eigenschap bepaalt hoe een element reageert op de hoogte en breedte van zijn content box. Het is bedoeld voor , video's en andere embeddable mediaformaten in combinatie met de object-position eigenschap.

Op zichzelf gebruikt, laat object-fit ons een inline afbeelding bijsnijden door ons fijnkorrelige controle te geven over hoe het plet en uitrekt binnen zijn .

5 waarden object-fit

object-fit kan worden ingesteld met een van deze 5 waarden:

  • fill:
    dit is de standaardwaarde die de afbeelding uitrekt om in de inhoudsbox te passen, ongeacht de hoogte-breedteverhouding.
  • contain:
    vergroot of verkleint de grootte van de afbeelding om het vak te vullen met behoud van de beeldverhouding.
  • cover:
    de afbeelding zal de hoogte en breedte van het kader vullen, wederom met behoud van de aspect-, maar vaak met bijsnijden van de afbeelding in het proces.
  • none:
    de afbeelding negeert de hoogte en breedte van het kader en behoudt zijn originele grootte.
  • verkleinen:
    de afbeelding zal het verschil tussen none en contain vergelijken om de kleinste concrete objectgrootte te vinden.

Ik ben zelf een fan van de contain waarde. Dit is hoe we die eigenschap zouden kunnen instellen:

img {
height: 120px;
}

.cover {
breedte: 260px;
object-fit: cover;
}

object-fit voorbeeld

afbeelding product foto schalen passend maken in kader object fit
Voorbeeld afbeelding product foto schalen passend maken in kader met CSS object fit

Omdat de tweede afbeelding een andere hoogte-breedte verhouding heeft dan de originele afbeelding links, zal het buiten het inhoudsvenster rekken, waardoor de bovenste en onderste delen van de afbeelding worden afgesneden.

Het is de moeite waard op te merken dat de afbeelding standaard gecentreerd is binnen zijn inhoudsvak, maar dit kan worden gewijzigd met de object-position eigenschap.

Demo object fit

De demo hieronder toont vijf voorbeelden die laten zien hoe we een afbeelding kunnen verpletteren in een inhoudsvak dat soms kleiner of groter is dan de oorspronkelijke breedte (pas de grootte van de browser aan voor een beter idee van hoe dit zou kunnen werken):

See the Pen object-fit by Robin Rendle (@robinrendle) on CodePen.

Info:
https://www.w3schools.com/css/css3_object-fit.asp


Wil je meer details over Afbeelding passend maken schalen kader CSS object-fitof info?

Wil je meer informatie? Veel cursisten met interesse in Afbeelding passend maken schalen kader CSS object-fit bekeken ook de onderstaande handleidingen en artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress site beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Afbeelding passend maken schalen kader CSS object-fit?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Afbeelding passend maken schalen kader CSS object-fit en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven