Изображение внутри iframe | HTML

Растягивающийся iframe

Отзывчивый фрейм (изменяется и высота, и ширина) не делает отзывчивым изображение, находящееся в нём (см. в разных браузерах). 

<style>
.resize {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.resize iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid green;
}
</style>

<div class="resize"><iframe src="//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg" marginheight="0" marginwidth="0"></iframe></div>

<!-- С помощью атрибутов marginheight и marginwidth можно убрать отступы до содержимого внутри ифрейма -->

Резиновая картинка внутри растягивающегося iframe

Дополнительная страница

На дополнительной странице расположена картинка в теге img (можно применять стили CSS), в iframe — URL дополнительной страницы. 

<!-- HTML текущей страницы -->

<style>
.resize {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.resize iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid green;
}
</style>

<div class="resize"><iframe src="//css.shpargalkablog.ru/2016/05/httpshpargalkablogru201605image-inside.html" marginheight="0" marginwidth="0"></iframe></div>

<!-- HTML страницы //css.shpargalkablog.ru/2016/05/httpshpargalkablogru201605image-inside.html -->

<style>
html, body {
  margin: 0;
  padding: 0;
}
img { /* пропорциональное изображение занимает всю возможную ширину */
  display: block;
  max-width: 100%;
}
</style>

<img src="//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg"/>
<!-- HTML текущей страницы -->

<style>
.resize {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.resize iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid green;
}
</style>

<div class="resize"><iframe src="//css.shpargalkablog.ru/2016/05/httpshpargalkablogru201605image-inside_3.html" marginheight="0" marginwidth="0"></iframe></div>

<!-- HTML страницы //css.shpargalkablog.ru/2016/05/httpshpargalkablogru201605image-inside_3.html -->

<style>
img { /* пропорциональное изображение, расположенное по центру, занимает всю возможную ширину и всю возможную высоту */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>

<img src="//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg"/>

Атрибут srcdoc у iframe

Атрибут srcdoc поддерживается не всеми браузерами (нет IE). Он позволяет задавать содержимое фрейма в атрибуте. При его наличии, атрибут src игнорируется. 

<style>
.resize {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.resize iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid green;
}
</style>

<div class="resize"><iframe srcdoc="<!DOCTYPE html><img src='//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg' style='display: block; max-width: 100%;'/>" src="//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg" marginheight="0" marginwidth="0"></iframe></div>
<style>
.resize {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}
.resize iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid green;
}
</style>

<div class="resize"><iframe srcdoc="<!DOCTYPE html><img src='//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg' style='position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%;'/>" src="//2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s00/romashki.jpg" marginheight="0" marginwidth="0"></iframe></div>
в f t
наверх ↑

4 комментария:

Unknown
скажите, а зачем картинку пихать в iframe? приведите пример такой ситуации
NMitra
Универсальная галерея для видео и картинок (это не моя идея, люди интересуются). Я подумала об iframe (меняешь URL и радуешься). Но с картинками вышла загвоздка.
Дядя Женя
Наталья, расскажите как встроить счётчик ливнет в код шаблона, в любое место, например в подвал, БЕЗ использования "Добавить гаджет"
NMitra
А в чём заключается трудность (не помню, есть ли там какие-то особенности)? У вас шаблон переработан и место для футера не определено. Можете добавить дополнительный div с кодом из http://www.liveinternet.ru/add после

<div style="text-align:center;margin:5px 0;font-size:11px;">© Как Заработать В Интернете™ <a href="http://mail-sender.blogspot.ru" target="_blank">КЛУБ СПАМЕРОВ </a> | <a href="http://nabazare.blogspot.ru" target="_blank">НА БАЗАРЕ</a></div>

Я на Метрику подсела, не мониторю произошли ли в Liveinternet какие-то изменения