Отображение изображения в Iframe

Question

Я хочу отобразить изображение внутри фрейма на моей веб-странице.Однако проблема в том, что я не могу заставить его расширяться до 100% его размера.

Я хочу сделать следующее.

• Иметь iframe на моей веб-странице.
• Вызовите изображение в пределах iframe.
• Сделайте изображение развернутым в натуральную величину и, как реакция, iframeпозволяет мне прокручивать.
• На моей веб-странице нет полос прокрутки

В настоящее время у меня есть код:

echo"<iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'></iframe>";

Это то, что, это делает iframe сверху моей веб-страницы и все еще не расширяется до 100%.Если я удаляю позицию: абсолютная вместо:

echo"<iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'></iframe>";

Я получаю расширение до 100% по ширине, но с точки зрения высоты, это всего 3 пикселя в высоту и есть полоса прокрутки для прокруткик основанию.

Я искал в Интернете поиски исправления, но все, что я пробовал, не работает.Некоторые упоминали также изменение CSS, но безрезультатно ...

РЕДАКТИРОВАТЬ

Другая проблема, с которой я сталкиваюсь, заключается в том, что изображение уменьшено в Firefox.Мне нужно щелкнуть изображение внутри фрейма, чтобы развернуть его до полного размера.Это правильно отображается в Chrome и IE.Есть ли исправление для этого?

Answer 1

используйте код для отображения изображения.

<iframe frameborder="0" scrolling="no" width="100%" height="100%"
   src="../images/eightball.gif" name="imgbox" id="imgbox">
   <p>iframes are not supported by your browser.</p>
</iframe><br />


<a href="../images/redball.gif" target="imgbox">Red Ball</a><br />
<a href="../images/floatingball.gif" target="imgbox">Floating Ball</a><br />
<a href="../images/eightball.gif" target="imgbox">Eight Ball</a>

Answer 2

Вы можете использовать некоторый JavaScript для определения размера содержимого iframe и изменения его размера.

Answer 3

ЕСЛИ у вас есть доступ к изображению локально И вы можете использовать функции php GD ...

$img_rsrc = imagecreatefromjpeg($path_to_image);
// or imagecreatefrompng, imagecreatefromgif, etc, depending on the type of your image
$height = imagesy($img_rsrc);
$width = imagesx($img_rsrc);
imagedestroy($img_rsrc);

Затем установите размер вашего iframe в пикселях в зависимости от высоты и ширины. Возможно, вам придется добавить немного к высоте и ширине, чтобы учесть поля.

Answer 4

убедитесь, что вы устанавливаете 100% высоты для всего, хотя DOM .. см. http://api.fatherstorm.com/test/iframe.php

и http://api.fatherstorm.com/test/iframe2.php

для примеров со встроенной страницей (CNN) или изображением

Answer 5

Ваша проблема в том, что вы непосредственно встраиваете ресурс изображения.

Это никогда не будет работать так, как вы хотите.Изображение всегда будет иметь оригинальный размер.

Вам необходимо установить свойство src iframe для отдельного файла HTML с собственным body, охватывающим изображение. Затем вы можете задать 100% ширину и / или высоту внутри тела, используя CSS.

Answer 6

Контейнер (включающий div, если у вас нет контейнера, вы должны его создать), похоже, ограничивает высоту iframe. Попробуйте сделать высоту контейнера 100%.

Answer 7

Добавьте это на CSS вашей главной страницы:

body, html {
   height:100%   
}