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

Question

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

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

作为显示我想要的示例，我在我的另一个 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 修改，以实现边缘到边缘的图像吗？我将不胜感激。

提前致谢！

最良好的祝愿， Firoze Mistry

标签： htmlcssimagemobileblogger

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