Can we make the full size image larger?

LiteCart Fan
Tól től Australia
Tagság ápr. 2023 óta

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
Tól től Sweden
Tagság máj. 2013 óta
tim

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

LiteCart Fan
Tól től Australia
Tagság ápr. 2023 óta

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
Tól től Sweden
Tagság máj. 2013 óta
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
Tól től Australia
Tagság ápr. 2023 óta

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

LiteCart Fan
Tól től Australia
Tagság ápr. 2023 óta

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
Tól től Sweden
Tagság máj. 2013 óta
tim

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

LiteCart Fan
Tól től Australia
Tagság ápr. 2023 óta

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

LiteCart Fan
Tól től Australia
Tagság ápr. 2023 óta

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
Tól től Sweden
Tagság máj. 2013 óta
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
Tól től Australia
Tagság ápr. 2023 óta

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.

Te
Ez a weboldal nem használ cookie-kat és nem használ harmadik féltől származó nyomkövetési technológiát. Úgy gondoljuk, hogy jobban tudjuk csinálni, mint mások, és tényleg gondolunk az Ön magánéletére.