Automatically maximize image size independently of window resizes?

[ChristianFrisson]

Automatically maximize image size independently of window resizes?

[marcolago]

Hi @ChristianFrisson.
I’m not sure if I had understood your request.
Could you make me a couple of examples of what you want to achieve?

Thanks
marcolago

[ChristianFrisson]

Hi @marcolago,

For example in your sample slides, section 5, page 2:
http://marcolago.github.io/flowtime.js/#/section-5/page-2
If the height of the window is lower than the height of the image, or if the width of the window is lower than the width of the image, the image is displayed as the maximum size it can get from the window and according to the aspect ratios of both window and image. However, if both width and height of the window are greater than respectively the width and height of the image, the image size stays fixed and doesn't fit the window.

I would like to have a similar behaviour as "fit to screen" for desktop wallpapers.

Thanks,
Christian

[marcolago]

Ok, understood.

To fit an image to the available space, like in the slide you linked, you have to edit the CSS rule .flowtime img like this:

.flowtime img {
  max-width: inherit;
  max-height: inherit;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This force the image to maximise itself and to maintain the aspect ratio cropping the parts that exceed the area.

If you want not to crop you can use object-fit: contain;.

Please, mind that this solution may not work as expected in every situation depending on how you set the CSS on image containers.

Let me know if this solve your issue and if you need further help for a specific use case feel free to drop a line.