benanair

Great, thanks for the clarification. Wish you the best!

Hi Weston,

Appreciate your work on this. Current the only CSS snippet I’m using is this last one you provided, which does the trick on my site:

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

Hi Weston,

Thanks again for the help! That worked, I added the new CSS and everything looks good now viewing without Javascript. Much appreciated.

Kind regards,
Jared

Hi Weston,

Appreciate the help. I wasn’t sure how exactly to add that object-fit:contain to the CSS, so I tried both:

body noscript > img {
	object-fit:contain;
}

and

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
	object-fit:contain;
}

However, I was not able to get the desired effect.

I have uploaded a screen capture video here: https://imgur.com/UrWkwKj to perhaps show things better. Images were added using the Classic Editor with defined width/height attributes.

Hi Weston,

I need to remove the width/height adjustment because it appears to stretch images to 100% of the content area. I have rendered my pages in Firefox w/o Javascript and screenshot the results here: https://imgur.com/JFyXy1R

• This reply was modified 3 years, 8 months ago by benanair.
• This reply was modified 3 years, 8 months ago by benanair.

Hi Weston,

Thank you very much for your CSS snippet. It fixed the issue. It does render the images now without Javascript enabled. For my theme (GeneratePress) I had to remove this part and all looks normally:

 /* Override width/height attributes defined on HTML elements in noscript. */
  width: 100%;
  height: 100%;

Oh wow, I will certainly be following! Appreciate the work, best of luck!

Unminified:

<amp-img
    class="wp-image-1209 size-full aligncenter amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout"
    title="Example"
    src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
    alt=""
    width="150"
    height="150"
    srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
    sizes="(max-width: 150px) 100vw, 150px"
    layout="intrinsic"
    disable-inline-width=""
    i-amphtml-layout="intrinsic"
    style="--loader-delay-offset: 132ms !important;"
>
    <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2Z....EXAMPLE=" /></i-amphtml-sizer>
    <noscript>
        <img
            class="wp-image-1209 size-full aligncenter"
            title=""
            src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
            alt=""
            width="150"
            height="150"
            srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
            sizes="(max-width: 150px) 100vw, 150px"
        />
    </noscript>
    <img
        decoding="async"
        alt=""
        title=""
        sizes="(max-width: 150px) 100vw, 150px"
        srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
        src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
        class="i-amphtml-fill-content i-amphtml-replaced-content"
    />
</amp-img>

Thank you Alexander for the quick reply. I found an easy solution by installing the plugin Advanced Excerpts, works great with the theme. Looks great now really loving this design style!