Blogger Dynamic Views (Mosaic theme): how to get full width Images on Mobile?

问题

My Blogger website link is: https://testfnm11.blogspot.com , which is based in the Blogger Dynamic Views Mosaic theme.

When viewing a Page on this site on a mobile phone, I would like the images to display edge-to-edge so as to use the full width of the mobile phone screen.

As an example to show what I want, I have achieved this on my other Blogger site: https://www.firozemistry.com which uses the SOHO theme. I did this by using a CSS code, but that code does not work on the Dynamic Views theme.

ps: For your reference, the CSS code I had used to get edge-to-edge images in my SOHO theme website was:

@media screen and (max-width: 1162px) {
body.item-view .post-body a[imageanchor="1"] img {
    margin: 0 -30px;
    max-width: calc( 97% + 60px);
    }

Could someone please give me a CSS code, or a HTML modification, to achieve edge-to-edge images? I would be most grateful.

Thanks in advance!

Best wishes, Firoze Mistry

回答1:

Try this

@media screen and (max-width: 1162px) {
  .article .article-content img {
    padding: 10px 0 !important;
    margin: 10px -50vw !important;
    max-width: 100vw !important;
    border: 0 !important;
  }
}

来源：https://stackoverflow.com/questions/62070271/blogger-dynamic-views-mosaic-theme-how-to-get-full-width-images-on-mobile