After update images with @3x are displayed too large

Support
1

In my web pages I have included bliders with name@3x.png or name@2x.jpg. Since the update from Grav 1.6 to Grav 1.7 (I think it was in this update) the images are no longer displayed correctly, but triple, respectively twice as wide.
How can I fix this error without reducing the size of the original images.
Example page

2

@madu, Could it be you have changed some css earlier…

Try adding the following to user/themes/bauhygiene/css/main.css :

img {
  width: 100%;
}

or something similar to suit your needs…

3

@pamtbaau: No, I did not change anything in the css, the scaling did not work after the grav-update.

In the main.css the following is set:

img {
  font-size: 16px;
  font-size: 1.6rem; }

figure {
  display: block;
  margin-top: 24px;
  margin-bottom: 24px;
  text-align: center; }
  figure.align-left {
    text-align: left; }
  figure.align-right {
    text-align: right; }
  figure.float-left, figure.float-right {
    margin-top: 8px;
    margin-bottom: 8px;
    clear: both; }
  figure.float-left {
    float: left;
    margin-right: 16px; }
  figure.float-right {
    float: right;
    margin-left: 16px; }
  figure figcaption {
    font-size: 14px;
    font-size: 1.4rem;
    font-style: italic; }
  figure img {
    max-width: 100%; }
    figure img.full {
      max-width: 100%; }
    figure img.half {
      max-width: 50%; }
4

@madu,

  • Before delving into your css snippets, did you try my suggestion?
  • Why are you setting font styles on an image?
  • What’s the use of figure if the img is not inside a figure?
5

@pamtbaau: Yes, I added that to the existing main.css in addition, once at the beginning and once at the end. After that I deleted the cache. That did not fix the appearance of the page. But thanks for the tip.
I did not create the template and css for these pages myself. The web designer who did this is unfortunately unavailable until at least the end of 2022.

6

@madu, It seems you’ve now added width: 100% to user/themes/bauhygiene/css/main.css at line 767 and the images look ok to me now.

By the way, it seems the English and French translations are broken, because of incompatibility with Grav 1.7.x. See Most Common Issues in the upgrade to 1.7 docs.

That seems a bit strange, because I would expect the same template is used for German, English and French. If the template displays German correctly for Grav 1.7, the other languages should too.

7

@pamtbaau: I added this formatting to the existing img block after the position at the beginning or at the end did nothing. Unfortunately the @3x images are still displayed too large with Chrome on my 24" monitor. All images, which only have a width of 704 px, as well as svg, are displayed correctly.

However, with the Edge or Opera browser, the @3x images are scaled correctly.

Also on my Android tablet the display with Chrome is now correct.

The FR and EN pages are redirected to bauhygiene.eu which does not work anymore, the pages of bauhygiene.ch is not multilingual created. This explains your finding :wink:

8

Now I have not only reloaded the page in Chrome, but also deleted the chache of the browser. Thus, the images are also displayed in this browser in the correct size. :slight_smile:

9

@madu, Nice! You may then mark the post as solved by ticking the ‘solution’ icon in the lower right corner of the reply that led to the solution.