Can we make the full size image larger?

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

hello
is it possible to make the pop up image product larger?
maybe a % of the screen size that is responsive? 

which files and location is this found in ., thanks

tim
Founder
Nuo Sweden
Narys nuo geg. 2013
tim

Just upload a larger image. The max width displayed is 80% of the browser window (80vw).

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

thanks, but too many images to resize or upload

"The max width displayed is 80% of the browser window (80vw)" where is this located? it does not seem to be 80% at 1080p?

thanks

what im seeing is?

.featherlight .featherlight-content>img {
    max-width: 80%;
    max-height: calc(100vh - 80px);

tim
Founder
Nuo Sweden
Narys nuo geg. 2013
tim

Max width and width are not the same thing. Max width can be smaller, but no bigger than max.

Upscaling a low resolution image is rarely a good idea. It will not reveal any more detail.

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

i still dont understand where this change in made in the code?

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

im not sure if its right way, but this is what im using

[b].featherlight .featherlight-content>img {
    max-width: 80vw;
    width: 650px;
    max-height: 80vh;[/b]

seems to keep the popup image to correct dimensions 

i think if i use 100% or a % it means the % of the original image? so i need to define a larger size to force an upscale?

it seems to respond to the screen size changes ok

tim
Founder
Nuo Sweden
Narys nuo geg. 2013
tim

Remove max-width and set width to 100vw meaning 100% of viewport width.

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

hi tim, that will result in the image being stretched and distorted amd slightly outside of screen right

LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

in
/ext/featherlight/featherlight.min.css
i added

@media (min-width: 768px) {
    .featherlight .featherlight-content>img {
        min-width: 500px;
        min-height: 500px;
        height: auto;
    }

so on bigger screens, small popup enlarge images open bigger than the thumbnail.
but on smalls screens original code applies
i should also allow larger images to load as per size?

tim
Founder
Nuo Sweden
Narys nuo geg. 2013
tim

With no max-wdth or a shrunken window your hi-res images will go beyond the width of the screen.

You could also try this:

.featherlight .featherlight-content>img {
        width: calc(100vw - 4em);
        height: auto;
    }
LiteCart Fan
Nuo Australia
Narys nuo bal. 2023

hi tim, that isnt working either? too big

could it be because im running dual monitors? 100% VIEW WIDTH is the total screen? not sure.

Jūs
This website uses no cookies and no third party tracking technology. We think we can do better than others and really think about your privacy.