这两行微信公众号上的css代码有什么不一样

xzykgc4mc3

不大会描述。这两行css代码(可能不是叫css代码)，是我在微信公众号上的文章图文排版样式，我通过电脑端浏览器用f12查看样式找下来的。
结果第一个样式，在手机端微信查看，点击图片，可以弹出大图。
第二个样式，是不会弹出大图的。
请问是样式里哪个参数锁定了。

其一

里面的图片被我用*号代替，保护隐私。
实现效果如下。中间主体图被我打码。保护隐私

1. <section style="width: 100%;"><section style="text-align:right;"><section style="width: 8em;height: 8em;border-radius: 100%;border-color: rgb(113, 176, 199);border-style: dashed;border-width: 1px;display: inline-block;margin-bottom: -5em;"></section><section style="text-align: left;margin-right: 5px;"><section style="width:88%;display: inline-block;"><section><img class="" data-ratio="0.5640625" data-src="https://*/640?wx_fmt=jpeg" data-type="jpeg" data-w="1280" style="display: block; width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https:*/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section></section>

复制代码

其二
实现效果如下图。中间圆圈是主体图，打码。

1. <section style="text-align: center;padding-top:1em;"><section style="display: inline-block;"><section style="display: flex;justify-content: flex-start;margin-bottom: -3.8em;"><section style="width: 120px;"><img class="" data-ratio="0.5555555555555556" data-src="https://*png" data-type="png" data-w="180" style="transform: rotate(-3deg); width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https://*?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section><section style="margin: 0px auto;padding: 5px;border-color: rgb(110, 175, 119);border-style: solid;border-width: 1px;border-radius: 100%;"><section style="background-position: center;margin: 0px auto;border-radius: 100%;border-radius: 50%;width: 240px;height: 240px;overflow-y: visible !important;background-image:url("https://*=jpeg");background-repeat: no-repeat;background-size: cover;"><br><br></section></section><section style="display: flex;justify-content: flex-end;margin-top: -3.5em;"><section style="width: 120px;"><img class="" data-ratio="0.5555555555555556" data-src="https://*=png" data-type="png" data-w="180" style="transform: rotate(-185deg); display: inline; width: 100% !important; height: auto !important; visibility: visible !important;" _width="100%" src="https://*=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section>

复制代码

另一个具体例子
来源  微信文章 请回答，2018 | 这一年你忘了的，我们帮你标记
在手机端微信阅读链接，点击图片可以跳出大图

1. <img class="" data-copyright="0" data-ratio="0.6650943396226415" data-s="300,640" data-type="png" data-w="1060" style="visibility: visible !important; width: 677px !important; height: auto !important;" data-src="https://mmbiz.qpic.cn/mmbiz_png/pNbHtxoJF2icP08zg77wrMHzqrZMEnww86xhNzTiaYbZbV1yYW0ZYSHicDdhr7R0b0KwlKxD3EW1gVZHOpiccujNSA/640?wx_fmt=png" _width="677px" src="https://mmbiz.qpic.cn/mmbiz_png/pNbHtxoJF2icP08zg77wrMHzqrZMEnww86xhNzTiaYbZbV1yYW0ZYSHicDdhr7R0b0KwlKxD3EW1gVZHOpiccujNSA/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0">

复制代码

同一篇文章里，点击图片不会跳出大图

1. <section style="white-space: normal;box-sizing: border-box;"><section class="" style="box-sizing: border-box;"><section style="margin-top: 10px;margin-bottom: 10px;font-size: 32px;box-sizing: border-box;"><section style="margin: auto;padding: 8px;width: 5em;height: 5em;border-radius: 100%;box-shadow: rgb(204, 204, 204) 0px 5px 5px;background-color: rgb(255, 255, 255);box-sizing: border-box;"><section style="width: 144px;height: 144px;border-radius: 100%;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;box-shadow: rgb(0, 0, 0) 0px 0px 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg");box-sizing: border-box;"><p style="margin-right: 8px;margin-left: 8px;width: 144px;height: 144px;overflow: hidden;line-height: 0;box-sizing: border-box;"><img data-ratio="1.5" data-type="jpeg" data-w="640" style="opacity: 0; box-sizing: border-box; visibility: visible !important; width: 144px !important; height: auto !important;" class="" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg" _width="144px" src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></p></section></section></section></section></section>

复制代码

想问下，到底哪个属性决定了不会跳出大图。

@jasake @随便注册 @emCupid

emCupid

看了半天没搞明白你要表达什么

xzykgc4mc3

emCupid 发表于 2018-12-12 17:35
看了半天没搞明白你要表达什么

是这样的。我经营着个微信公众号。所以需要些图片排版的样式。
所以上面的代码都是我在其他微信文章里，通过浏览器查看元素，找到的样式。
结果我发现第1、3个样式，最后在手机端微信上查看，点击图片，可以跳出大图。像我上面新补的图
但第2、4个样式，点击图片，是不会跳出大图片的
我想请问下，能否通过上面的样式代码，找出哪个是决定能跳出大图的参数。
第2个例子，是微信公众号 三联生活周刊 的一篇文章 请回答，2018 | 这一年你忘了的，我们帮你标记

emCupid

xzykgc4mc3 发表于 2018-12-12 17:46
是这样的。我经营着个微信公众号。所以需要些图片排版的样式。
所以上面的代码都是我在其他微信文章里， ...

初步看来不你说的弹大图是因为点击没有作用到图片上，直接被其他元素档在前面模拟的+背景图上了。

ELOHIM

重点在这：这都是样式，可能大概或许没有一个是事件。

鲁鲁，你经营着两个什么公众号，可以私信我说一下吗。

随便注册

点击查看大图是js干的，本帖就有啊，表情图点击就没反应。如果不是挡住了，就只提取1的<img……>这一段，替换到2看看。
格式化下
http://tool.oschina.net/codeformat/html

xzykgc4mc3

随便注册 发表于 2018-12-12 19:15
点击查看大图是js干的，本帖就有啊，表情图点击就没反应。如果不是挡住了，就只提取1的这一段，替换到2看看 ...

但是这串样式不是表情图，里面的图片是大图
https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg

1. <section style="white-space: normal;box-sizing: border-box;"><section class="" style="box-sizing: border-box;"><section style="margin-top: 10px;margin-bottom: 10px;font-size: 32px;box-sizing: border-box;"><section style="margin: auto;padding: 8px;width: 5em;height: 5em;border-radius: 100%;box-shadow: rgb(204, 204, 204) 0px 5px 5px;background-color: rgb(255, 255, 255);box-sizing: border-box;"><section style="width: 144px;height: 144px;border-radius: 100%;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;box-shadow: rgb(0, 0, 0) 0px 0px 0px;background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg");box-sizing: border-box;"><p style="margin-right: 8px;margin-left: 8px;width: 144px;height: 144px;overflow: hidden;line-height: 0;box-sizing: border-box;"><img data-ratio="1.5" data-type="jpeg" data-w="640" style="opacity: 0; box-sizing: border-box; visibility: visible !important; width: 144px !important; height: auto !important;" class="" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg" _width="144px" src="https://mmbiz.qpic.cn/mmbiz_jpg/pNbHtxoJF2icP08zg77wrMHzqrZMEnww8vxicWDqAnfnIDmibydrnvMNmSGkZAtsCBOEiaE7hDTW3Liaac5bodicu31Q/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" crossorigin="anonymous" data-fail="0"></p></section></section></section></section></section>

复制代码

随便注册

卡饭靠的图片属性中的zoomfile，表情图没有这个属性就不会点击放大
https://a.kafan.cn/static/1/forum_viewthread.js?EaB

但是不知道微信检测的哪个属性，CSS代码也看不出来。你先排查是不是挡住了，再用替换法看哪个影响了判断，甚至img上级标签的属性、有哪些上级标签都可能会影响。

neil_aug

也可能本身图就不大

xzykgc4mc3

随便注册 发表于 2018-12-12 20:50
卡饭靠的图片属性中的zoomfile，表情图没有这个属性就不会点击放大
https://a.kafan.cn/static/1/forum_ ...

请问，怎么排查是否挡住了