Blogger 动态视图（马赛克主题）：如何在移动设备上获取全宽图像？

Question

我的 Blogger 网站 link 是：https://testfnm11.blogspot.com，它基于 Blogger Dynamic Views Mosaic 主题。

在移动设备 phone 上查看此站点上的页面时，我希望图像边对边显示，以便使用移动设备 phone 屏幕的整个宽度。

作为展示我想要的示例，我已经在我的另一个 Blogger 站点上实现了这一点：https://www.firozemistry.com，它使用 SOHO 主题。我使用 CSS 代码完成了此操作，但该代码不适用于动态视图主题。

ps：供您参考，我在我的 SOHO 主题网站中用来获取边到边图像的 CSS 代码是：

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

有人可以给我一个 CSS 代码，或 HTML 修改，以实现边到边图像吗？将不胜感激。

提前致谢！

最良好的祝愿，冰冻米斯特里

Answer 1

试试这个

@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;
  }
}

Blogger 动态视图（马赛克主题）：如何在移动设备上获取全宽图像？

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

html

css

image

mobile

blogger