tags:

Plaatjes centeren en croppen via css

Plaatjes croppen en mooi gecentreerd uitlijnen met CSS was nog wel eens een uitdaging. Met name in de situatie waarbij de 'klant' zelf plaatjes mag invoeren waarop geen controle plaatsvindt. Bij menig website het geval. Om de weergave mooi te krijgen bestaat er vanuit een achtergrondplaatje de mogelijkheid de positie op cover te zetten: background-size: cover; div { background-image: url(someimage); background-size: cover; } Voor een plaatje (img) kan dit dus ook, maar dan met: img { width: [gewenste breedte]; height: [gewenste hoogte]; object-fit: cover; } Er zijn nog wat varianten van object-fit mogelijk. Bekijk en probeer ze .

Plaatjes croppen en mooi gecentreerd uitlijnen met CSS was nog wel eens een uitdaging. Met name in de situatie waarbij de 'klant' zelf plaatjes mag invoeren waarop geen controle plaatsvindt. Bij menig website het geval.

Om de weergave mooi te krijgen bestaat er vanuit een achtergrondplaatje de mogelijkheid de positie op cover te zetten:

background-size: cover;

div {
  background-image: url(someimage);
  background-size: cover;
}

Voor een plaatje (img) kan dit dus ook, maar dan met:

img {
  width: [gewenste breedte];
  height: [gewenste hoogte];
  object-fit: cover;
}

Er zijn nog wat varianten van object-fit mogelijk. Bekijk en probeer ze.