Question

我在使用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>

我尝试了多种方法尝试调用该图像，但我无法添加一个类，因为我无法编辑该代码。

Answer 1

弹出窗口的内容是iframe。

此弹出窗口的标记很可能是在您的主javascript文件中设置的。请参阅magnific popup documentation中的此实施示例。

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

.item-wrapper{
    height:12rem;
    position:relative;
    overflow:hidden;
    color:white;
    font-family:sans-serif;
  }
  
  .content{
    height:100%;
    background-color:red;
    padding:10px;
  }
  
  .popup-title{
    position:absolute;
    bottom: -101%;
    width:100%;
    transition: bottom 0.5s, top 0.5s;
    vertical-align: bottom;
      background-color: black;
  }

.popup-title span, .popup-title p{
      display:block;
      margin:0;
      padding: 10px;
}

.item-wrapper:hover .popup-title{
        bottom: 0;
}

Magnific Pop-up图片太大了

1 个答案: