Chocolat
1.0.2
1.0.2
  • Installation
  • Usage
  • Options
  • Api
  • CSS classes
  • Image sizes
  • Upgrading from v0.4
  • Contributing
Powered by GitBook
On this page
  • scale-down
  • contain
  • cover
  • native

Image sizes

PreviousCSS classesNextUpgrading from v0.4

Images can take different sizes depending on the dimensions of the container and the native dimensions of the image.

You can find more details on the differents behaviour on this page: Keep in mind that Chocolat doesn't use object-fit, but it reproduces its behaviour with javascript.

scale-down

If the image is bigger than the container it's resized to fit. If the image is smaller than the container it's not streched, only displayed at native dimensions.

contain

If the image is bigger than the window it's resized to fit. If the image is smaller than the window it's streched, to fit the container.

cover

The image cover the container, no white space are displayed.

native

The image is never streched nor shrinked, always displayed at native dimensions.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit