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

Question

我的 Blogger 网站链接是：https://testfnm11.blogspot.com，它基于 Blogger 动态视图马赛克主题。

在手机上查看本网站的页面时，我希望图像边对边显示，以便使用手机屏幕的整个宽度。

作为显示我想要的示例，我在我的另一个 Blogger 网站上实现了这一点：https://www.firozemistry.com 使用 SOHO 主题。我通过使用 CSS 代码来完成此操作，但该代码不适用于 Dynamic Views 主题。

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