Magnific Pop-up 图片太大答案

【问题标题】：Magnific Pop-up image too bigMagnific Pop-up 图片太大
【发布时间】：2016-12-24 11:33:03
【问题描述】：

我在处理有人在 wordpress 上为我构建的内容时遇到了一些问题。当然，他们拿了钱就跑了，所以我不太清楚发生了什么。在桌面上，它似乎很好，但是在移动设备上，这个 Magnific Popup 不能正常工作。它以全宽显示图像，而不是响应屏幕尺寸。我不想让图像本身变小，因为那样它在桌面上就会变小。这是我在 chrome 上检查它时的代码：

         <div class="mfp-content"><div class="mfp-iframe-scaler"><button title="Close (Esc)" type="button" class="mfp-close">×</button><iframe class="mfp-iframe" src="test.jpg" frameborder="0" allowfullscreen=""></iframe></div></div>
#document
<html><head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>test.jpg (900×506)</title></head><body style="margin: 0px;"><img style="-webkit-user-select: none" src="test.jpg"></body></html>

但是实际的源代码显示：

 <div class="attribute-media-wrap">
                                        <a href="test.jpg" class="vedio_wrap">
                                            <img src="test.png">
                                        </a>
                                        <div class="attribute-media-title-desc">

                                        </div>

我尝试了多种方法来尝试调出该图像，但由于无法编辑该代码，因此无法向其添加类。

【问题讨论】：

您是否尝试仅将样式附加到元素？将样式而不是类添加到 div 或实际的 imgag 标签可能会解决它们的样式。虽然不是最干净的，因为您将有两个相互争论的 css 语句。
我无法向 html 本身添加任何内容，因为我无法使用 WordPress 访问它。我可以添加自定义 css 或乱用 php 文件，但我什至不知道从哪里开始
如果你能弄乱他们的css，你有没有试过定位“mfp-content”或“attribute-media-wrap”？我认为您可以在现有课程的末尾添加一些内容。
我尝试添加 css 来表示类似 .mfp-content img {width:100%:} 的内容，但它不会改变任何内容。我什至尝试使用针对特定 url 的 css 选择器调用图像，但这并没有改变任何内容。
我可以使用检查器样式表，这使它可以做我想做的事，但是将相同的代码添加到页面上的代码块或我的自定义 css 文件中，没有任何反应

标签： php html css wordpress image

【解决方案1】：

弹出的内容是一个 iframe。

这个弹出窗口的标记很可能是在您的主 javascript 文件中设置的。在magnific popup documentation 中查看此实现的示例。

要在 css 中设置样式，您需要定位 iframe 本身，而不是 iframe 的内容。即：

.mfp-iframe {max-width: 100%;}

【讨论】：

图像本身是问题，而不是 iframe。 iframe 在移动设备和台式机上均正常显示。图片，没有。它应该对 iframe 做出响应，但是，图像保持正常大小。因此，当您向下缩小页面时，一旦它达到一定大小，就会出现滚动条并且图像不会缩小。在移动设备上，图像没有滚动条，它只是占据了屏幕。所以这段代码已经到位，不会改变我的需要。
将其设置为 iframe 类型弹出窗口而不是图像类型有什么特别的原因吗？图片是否来自您自己的域？
这是我们上传到wordpress的图片，是的。弹出这个图片的代码不是我写的，所以也无法访问。