Image zoom problem about spee.ch-components HOT 5 OPEN

@Invariant-Change could you take a look at this?

from spee.ch-components.

Re: calc(100vh - 3em); is a conflict of interest

• em = Relative to the font-size of the element.
• vh = Relative to 1% of the height of the viewport.

This means the image can only be as big as 100% of the screen size minus 3em of the text size.

So when you zoom in, the image shrinks by the same em increments that the text increases, and because of the max height is 100vh - 3em, which is less than 100% of the screen size, it never zooms bigger.

It would be best to leave sizing natively to the browser. Most browsers do a good job with images, initially putting 100% of it in view with a zoom button to make it 100% of the image size while retaining the screen zoom in and out functionality.

And as @kauffj pointed out, the image size should be included in the HTML for improved speed and better image control.

Hope that helps :)

from spee.ch-components.

As for the "Hosted via Spee.ch" part not interfering with the screen/image size and adding scrollbars, this would work nicely...

a#asset-boilerpate .speech-logo {
    position: fixed;
    right: 0;
    bottom: 0;
    background: #444;
    padding: 1px 12px;
    color: #afdae4;
    border-radius: 4px 0 0;
    border-top: 1px solid #555;
    border-left: 1px solid #555;
}

from spee.ch-components.

@skhameneh can you take a look at this? Will the solution work, can/should it be implemented quickly?

from spee.ch-components.

Still valid and the layout requires other changes for this; doesn't look to be an easy solution because of the flex layout we use.

from spee.ch-components.