Magnific彈出圖片太大

我在使用wordpress爲某人制作的內容時遇到了一些問題。當然，他們拿走他們的錢跑了，所以我無法弄清楚發生了什麼。在桌面上，它似乎很好，但是在移動設備上，這個Magnific Popup不能正常工作。它以全角顯示圖像，而不是響應屏幕尺寸。我不想讓圖像本身變小，因爲在桌面上它會變小。這是我有它的代碼，當我檢查它在Chrome：Magnific彈出圖片太大

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

我曾嘗試多種方法來嘗試和呼叫出圖像，但我不能添加類，因爲我無法編輯該代碼。

來源

2016-08-17 mpeterson

你嘗試只是將樣式附加到元素？將樣式而不是類添加到div或實際imgag標籤可能會影響其樣式。不是最乾淨的，因爲你會有兩個css聲明互相爭論。 – bonzo

我無法向html本身添加任何內容，因爲我無法使用WordPress訪問它。我可以添加自定義CSS或亂七八糟的PHP文件，我甚至不知道從哪裏開始 – mpeterson

如果你可以與他們的CSS混亂，你有沒有嘗試定位「MPF內容」或「屬性 - 媒體包裝「？我想你可以在預先存在的類的最後加上一些東西。 – bonzo

彈出窗口的內容是iframe。

此彈出窗口的標記最有可能設置在您的主JavaScript文件中。請參閱magnific popup documentation中的實施示例。

要在css中設置此風格，您需要定位iframe本身，而不是iframe的內容。即：

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

來源

2016-08-17 23:03:26

圖像本身是問題，而不是iframe。 iframe在手機和臺式機上都顯示正常。圖像，不。它應該對iframe有反應，但是，圖像保持正常大小。因此，當您向下滑動頁面時，一旦達到一定的大小，滾動條就會出現，圖像不會收縮。在移動設備上，圖像沒有滾動條，只是佔用了屏幕。所以這段代碼已經到位了，並沒有改變我需要的東西。 – mpeterson

是否有任何特殊原因將其設置爲iframe類型的彈出窗口而不是圖片類型？圖像是否來自您自己的域名？ –

這是我們上傳到wordpress的圖片，是的。我沒有爲這個圖像彈出代碼，所以我也無法訪問它。 – mpeterson

Magnific彈出圖片太大

回答

相關問題