Q&A
uskさん
とてもご丁寧なご返答ありがとうございます！
コメント頂きました内容を参考に下記の様なサンプルを作ってみたのですが、
どうしてもウィンドウサイズの横幅を狭くすると画像はしっかりと縮むのですが、
画像を読み込んでいるifreamの高さがうまく縮まらず、
2つ目に設置したifreamとの間に隙間ができてしまいます。
また反対にウィンドウサイズの横幅を横に伸ばした場合、
上のifreamと下のifreamが重なり、
中の画像も切れてしまいます。。。
この部分に関しては、
どのように対応すればよろしいでしょうか。
下記にて現在試しているサンプルのHTMLを記載させて頂きます。
＝＝＝＝【 画像が入っているHTML（ifreamで読み込まれるHTML）-1 】＝＝＝＝
■HTML名：back-image.html
▼HTMLソース
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
<!--
html,body {
height:100%;
margin:0;
padding:0;
}
img {
max-width:100%;
min-width:10%;
}
-->
</style>
</head>
<body>
<img src="http://placehold.it/2000x1500/ffff00/000000">
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝【 画像が入っているHTML（ifreamで読み込まれるHTML）-2 】＝＝＝＝
■HTML名：back-image2.html
▼HTMLソース
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
<!--
html,body {
height:100%;
margin:0;
padding:0;
}
img {
max-width:100%;
min-width:10%;
}
-->
</style>
</head>
<body>
<img src="http://www.placehold.it/2000x1500">
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝【 上記2つのHTMLをifreamで読み込むHTML 】＝＝＝＝
■HTML名：ifream-back-image.html
▼HTMLソース
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
<!--
html,body {
height:100%;
margin:0;
padding:0;
}
#ifream_test,
#ifream_test2 {
max-width:100%;
min-width:100%;
height:100%;
position:relative;
top:0;
left:0;
}
-->
</style>
</head>
<body>
<iframe id="ifream_test" src="back-image.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>
<iframe id="ifream_test2" src="back-image2.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
以上です。
大変お手間ではございますが、
上記の件に関しまして、
ご回答の程宜しくお願い致します。
簡単にご説明させて頂きますと、
下記の様にifream-back-image.htmlに
左記の2つのHTMLを読み込みたいと思っております。
●back-image.html━━┳━ ifream-back-image.html
●back-image2.htm l━┛
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。