2.3.6.1 viewing wide image in Chrome on Nexus 7 (Bugs)

by Magma, Saturday, August 13, 2016, 01:59 (2785 days ago)

Not sure if it's a bug but never noticed it before. Normally if a user posts a wide image, for extreme example 4000x2500 the default template of the website stays the same width as the device but you get a horizontal scroll bar, so you can scroll off the website to view the right side of the image.

Viewing on the Nexus 7 Chrome it brings the right side of the website in and shrinks the website width to a quarter of the image? I know you can thumbnail images but not everybody does that.

Avatar

2.3.6.1 viewing wide image in Chrome on Nexus 7

by Auge ⌂, Monday, August 15, 2016, 15:33 (2782 days ago) @ Magma

Hello

Not sure if it's a bug but never noticed it before. Normally if a user posts a wide image, for extreme example 4000x2500 the default template of the website stays the same width as the device but you get a horizontal scroll bar, so you can scroll off the website to view the right side of the image.

Is this the case on mobile devices too? I would expect the below described zoomish behaviour in the default template on small viewports, because the template is not mobile aware.

Viewing on the Nexus 7 Chrome it brings the right side of the website in and shrinks the website width to a quarter of the image? I know you can thumbnail images but not everybody does that.

Do you have an example page where I can test it with a different device in several browsers?

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

2.3.6.1 viewing wide image in Chrome on Nexus 7

by Magma, Monday, August 15, 2016, 20:32 (2782 days ago) @ Auge

I just posted a pic in the test thread to see if this site does the same and it does. Instead of getting a horizontal scroll it makes the right side of the website shrink on Nexus 7 tablet.

Avatar

2.3.6.1 viewing wide image in Chrome on Nexus 7

by Auge ⌂, Tuesday, August 16, 2016, 09:20 (2781 days ago) @ Magma

Hello

I just posted a pic in the test thread to see if this site does the same and it does. Instead of getting a horizontal scroll it makes the right side of the website shrink on Nexus 7 tablet.

I tested it on a Samsung device with a Android 4.4.4 in Firefox 48. The image keeps its width and height and I get a left-right-scrollbar. I see this behaviour in this forum and in an entry in my installation with a partly mobile-aware template too.

[image]

The header is shifted to the left, because I scrolled the page a bit to the right. The solution will be to set the max-width of the images inside the entries to 100% of the entries container.

*But* this is only the first half. One further "problem" is the file size of the image. Why should I (as the user of a forum) transmit a (in the case of your image) 214kB large file to my device when it will be shown with a width of only 400px, what corresponds with a file size around 50kB?

At least for the images that are uploaded with the intern function is a scaling to two or three additional resolutions imaginable.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

2.3.6.1 viewing wide image in Chrome on Nexus 7

by Auge ⌂, Tuesday, August 16, 2016, 14:58 (2781 days ago) @ Magma

Hello

I just posted a pic in the test thread ...

I used this picture for my tests. The following is the result.

If I change the CSS and add the rule .body img { max-width: 100%; } the images will fit in every case into the viewport. If it is intended to change the behaviour only for mobile devices (I would not distinguish these cases), you'll need @viewport-rules for the different viewport sizes.

With the above suggested CSS-rule the result looks like in the below image. The first part of the image shows an entry with an image, that is resized to a physically width of 1200px. In the second part the image has a width of 400px and in the third one a width of only 240px.

[image]

That means, that the images with a greater width than the viewport-width (- margins, etc.) will be shrinked to fit the width but smaller images stay unmodified.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

RSS Feed of thread