The popup informations is to height with vertical pictures

augras

As said in the tittle the popup informations is to height with vertical pictures and to see the informations i must scroll.
It seems a vertical picture is not resized.
Is it possible to resize it to keep the popup in the screen ?

Karl

augras Can you be a bit more specific, or include a screenshot or a link? First of all, the popup does not scroll, so I'm not sure where you get that from. Furthermore, vertical pictures are definitely resized to fit the screen, as you can see in the link below.
https://demo.files.gallery/?galleries/girls#pid=allef-vinicius-4xX2iEzegs4-unsplash.jpg

If you speak of the MODAL window, this is not default for images. The point of the modal, is to display all information about the file, and to achieve this, there might be scroll. We can't resize the modal window to fit inside small screens regardless of how much vertical info there is. How would that be possible?

???

You can't resize a box with unknown amount of text to fit inside the screen height. We can however resize an image (see popup, which is meant for images), to scale to fit within the screen. Thats why the popup is optimal for viewing images, and the modal is optimal for viewing info. Surely that makes sense.

augras

It's in the Modal window.
You can see it with the vertical pictures at the end here : https://augras.eu/img/CamperVanXL/
I understand what you said for the text, but i am talking only about the picture.
An «horizontal» picture is resized in the Modal window, maybe a vertical also but then only on width.

Karl

augras An «horizontal» picture is resized in the Modal window, maybe a vertical also but then only on width.

It doesn't work like that. The modal is limited to a certain width, for functional viewing, and also because that is optimal width for reading the text/data for the file. This width is set to 520px. On small(mobile) screens, the width will be even smaller, but set to 100% device width. Therefore, the image within the modal will shrink with the width of the screen. The width isn't in any way set to "fit inside window", it's just logical that the width is limited.

The height on the other hand, will simply take as much space as required with the image displaying at the given width. We don't scale down the height of the image, because 1. it will look strange, and 2. we don't know how much to scale the height, because of the space in the topbar and margin above, and 3. it will then scale the width. This is how all modal windows work (in all frameworks), because it's logical.

And just to be clear, that is why the popup mechanism is superior for specifically displaying images in full.

augras I understand what you said for the text, but i am talking only about the picture.

This is not logical, and not how modals work. This is how the POPUP works, and why it's assigned for images. If we scale the image to "fit inside height of screen" in the modal, it could look like this:

Not only is it tiny and doesn't look nice, but you are asking to scale only the image, while the rest of the data is accessible only through scroll anyway. This is what the popup is for, which shows when you click the image:
https://augras.eu/img/CamperVanXL/#pid=24Porte-v%C3%A9los_avec_porte-skis_et_coffre2.jpg

Besides, how do your users access the modal? They need to right-click and select "show info". The only point in doing this, would be if they want to see the extended text-based info about the image, and if this is hidden behind scroll anyway, what's the point? The default popup will display the image best, the optional modal is made to emphasize the text info.

augras

Karl If we scale the image to "fit inside height of screen" in the modal, it could look like this:

It's what i'm looking for : can you let me know how do you get it please ?

For me, but maybe i'm wrong, this Modal window is only to access the informations about a picture and only a thumb may be displayed here : to display the picture, as you said, the popup mechanism is here.

Karl

augras It's what i'm looking for : can you let me know how do you get it please ?

In custom CSS, assign the following.

.modal-image {
  max-height: 60vh;
  width: auto;
}

It's just an approximation, and you can try to increase or decrease the 60vh value. If you set the value to 100vh, then it will be maximum the height of the browser viewport, but it will still not show entirely of course, because the modal image is not attached to the top of stage.

For me, this is not a functional solution at all. The popup exists exactly for the reason to emphasize and view images perfectly within the viewport. The modal is there to display a file and preview, in a scrollable layout as necessary to include all information about the file. There is no beneficial viewing experience to have the image squeezed down to a tiny size just to try to fit it inside the viewport while the modal itself is still scrollable.

augras For me, but maybe i'm wrong, this Modal window is only to access the informations about a picture and only a thumb may be displayed here : to display the picture, as you said, the popup mechanism is here.

The modal is primarily meant for non-image files, because they can't use the popup of course. Images will open in the popup on click, because it's a superior way to specifically view images. You can still open images in the modal, which might be better when viewing extensive info (captions, exif, iptc) about the image, but the popup is clearly better for viewing the image. That's why it's unclear why you need to modify the way the modal displays images, when the popup is clearly superior for this purpose, while the modal is good if someone wants to review the info (text) about the image.

The modal, like the popup, will still display the full size image, but it's limited inside the modal window size, which may scroll to contain all info about the file.

augras

Thanks Karl , it works.

Karl Images will open in the popup on click, because it's a superior way to specifically view images.

Of course, i agree with you.
But in this popup i hide the caption : there is only the picture... and to see the informations it's only in the modal window. So, in this window, i think, especially with vertical picture, it is better to resize the picture which is not the goal here.

Thanks again.

augras

I made the same thing for video files with
.modal-video { max-height: 50vh; width: auto; }