Изображение крупноформатное слишком большое

У меня возникли проблемы с контентом, который у меня был для меня на Wordpress. Конечно, они взяли свои деньги и побежали, поэтому я не могу понять, что происходит. На рабочем столе, кажется, все в порядке, однако на мобильном устройстве этот Magnific Popup работает неправильно. Он отображает изображение на полной ширине вместо того, чтобы реагировать на размер экрана. Я не хочу, чтобы изображение было меньше, потому что тогда оно будет маленьким на рабочем столе. Это код, у меня есть для него, когда я проверить его на хроме:Изображение крупноформатное слишком большое

  <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, попробуйте найти «mfp-content» или «атрибут-медиа-обернуть» «? Я бы подумал, что вы можете просто добавить что-то до конца предсуществующих классов. – bonzo

Содержимое всплывающего окна является iframe.

Разметка для этого всплывающего окна, скорее всего, установлена в вашем основном файле javascript. См. Пример этой реализации в magnific popup documentation.

Чтобы создать стиль в css, вам нужно настроить таргетинг на iframe, а не на содержимое iframe. i.e:

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

источник

2016-08-17 23:03:26

. Само изображение - проблема, а не iframe. IFrame выглядит нормально как на мобильном, так и на рабочем столе. Изображение, нет. Он должен реагировать на iframe, однако изображение остается в нормальном размере. Поэтому, когда вы сбрасываете страницу вниз, как только она достигает определенного размера, появляются полосы прокрутки, и изображение не уменьшается. На мобильном устройстве на изображении нет полос прокрутки, которые просто занимают экран. Так что этот код уже на месте и не меняет то, что мне нужно. – mpeterson

Есть ли какая-то особая причина, почему это настроено как всплывающее окно типа iframe, а не тип изображения? Является ли изображение поданным из вашего собственного домена? –

Это изображение, которое мы загрузили в Wordpress, да. Я не писал код для этого изображения, поэтому я не могу получить к нему доступ. – mpeterson

Изображение крупноформатное слишком большое

ответ

Смежные вопросы