Fullscreen on portrait format and don't stretch option?

[uvula]

Hi Nicolas,
I started playing your JS code. Great and easy to use approach. Thanks.

I'm playing with different pictures. I use:
imageSize : 'cover',

But it the picture is in portrait format, the image is stretched to screen width. So only the upper part of the image is shown.

Additinally: when using imageSize : 'cover',
if a image resolution is smaller than screen resolution it will be streched. Maybe have the possibilty to control this behavior. So if pictures have greater or equal screen resolution, use screen size. If smaller, use native size.

[nicolas-t]

Hello !

imageSize : 'cover',

But it the picture is in portrait format, the image is stretched to screen width. So only the upper part of the image is shown.

Yes, cover is stretching the image, I think you are looking for contain instead.
details here : https://developer.mozilla.org/fr/docs/Web/CSS/background-size

Additinally: when using imageSize : 'cover',
if a image resolution is smaller than screen resolution it will be streched. Maybe have the possibilty to control this behavior. So if pictures have greater or equal screen resolution, use screen size. If smaller, use native size.

True, It could be nice to be able to use cover without stretching the image, (default does it, but in a contain way)

If you are playing with the code, could you try the next release? I'm looking for beta testers.
https://github.com/nicolas-t/Chocolat/releases/tag/v1.0.0-beta.0

Since it lacks documentation at the moment, I'm available to help you make it run

Best,

[uvula]

Hi Nicolas,

0.)
Sorry, your answer (notification from github) stuck in spam folder.
I'm not very experienced with JS/JQ/CSS.

1.)
I downloaded 1.0.0-beta and started testing. At least it is working :-)
I will continue with this version playing

2.) About cover vs contain.
I switched to "contain" mode. Here the aspect ratio is correct and I see the whole picture, which looks fine.
But in "contain" mode the picture is padded on each side, so it is not really full screen like in "cover" mode.

So I'm looking the see a picture, if greater or equal screen size in "full screen" or windows size.
Maybe, if picture is smaller than screen resolution in native resolution.
But I didn't get it managed (yet).

Thanks for your patience.

[uvula]

Hi Nicolas,
my solution (based at 1.0.0-beta) would be to edit chocolat.iife.js and change the "native" behavior.
See code below. If image is smaller, use native size, if image is greater, use holder size.

Maybe a "native2" or "natural" or another name.
May you check the "zoom" behavior may can work as you expected?

    } else if (this.settings.imageSize == 'native') {
      height = imgHeight;
      width = imgWidth;
  if ( imgHeight > holderHeight ) {
    height = holderHeight;
    width = Math.floor(holderHeight * imgWidth / imgHeight);
  } else if (imgWidth > holderWidth ) {
    height = Math.floor(holderWidth * imgHeight / imgWidth);
    width = holderWidth;
  }
    } else {

`

[thely]

@uvula , have you considered submitting a pull request? I came to the Issues to see if anyone else was asking this question, because I'm having a similar problem of cover images exploding past the window width at mobile sizes. I would love if some kind of mobile-aware cover size was included in chocolat!