Blogger动态视图(马赛克主题):如何在移动设备上获取全宽图像? [英] Blogger Dynamic Views (Mosaic theme): how to get full width Images on Mobile?

问题描述

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

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

在用手机查看此网站上的Page时，我希望图像可以边到边显示，以便使用手机屏幕的整个宽度.

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.

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

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:作为参考，我用来在SOHO主题网站中获取边缘到边缘图像的CSS代码是:

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

有人可以给我CSS代码或HTML修改以实现边缘到边缘的图像吗?我将不胜感激.

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

提前谢谢！

最良好的祝愿， 烈焰迷雾

Best wishes, Firoze Mistry

推荐答案

尝试一下

@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动态视图(马赛克主题):如何在移动设备上获取全宽图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！