- ベストアンサー
iframe 内の画像を自動縮小させない方法
iframe 内の画像を自動縮小させない方法が分かりません。 <iframe src="**.ｊｐｇ" width="100" height="100" scrolling="yes" style= resize:none; "> このような resize 禁止指定をしても、画像がフレームのサイズに強制的に押し込まれて 原寸表示ができません。 CSSを用いる方法でも構いませんので、よろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ごく簡単な例です。 何はともあれ順当にHTMLを <div id="manga1"> <ol> <li id="C1"><a href="#C2">２コマ目へ</a></li> <li id="C2"><a href="#C3">３コマ目へ</a></li> <li id="C3"><a href="#C4">４コマ目へ</a></li> <li id="C4"><a href="#C5">５コマ目へ</a></li> <li id="C5"><a href="#C6">６コマ目へ</a></li> <li id="C6"><a href="#C1">１コマ目へ</a></li> </ol> </div> のように書きます。idに数字を最初にかけない! [画像]は、Wikiの 漫画 - Wikipedia( http://ja.wikipedia.org/wiki/%E6%BC%AB%E7%94%BB ) にある画像へ進み、名前を[Petit_Sammy_eternue.jpg]に変更してimagesホルダーに保存する。 また、それぞれのコマを指定サイズで切り抜いてPetit_Sammy_eternue_1.jpg～Petit_Sammy_eternue_6.jpgとして保存しておきます。 ★リンクの画像は単なるテキストでも良いです。 [例]<li id="C1"><a href="#C2"><img src="./images/Petit_Sammy_eternue_1.jpg" width="191" height="167" alt="２コマ目へ"></a></li> ↓ <li id="C1"><a href="#C2">２コマ目へ</a></li> ※本来はサンプルのように<img>で画像を入れておくほうか良いです。速度は変わらない。 ★印刷時にはちゃんと６コマの漫画になります。(印刷プレビューで・・) ※Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力でチェック済みのウェブ標準HTML4.01strict + CSS2.1 ※タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- div.section{ position:relative; top:50px;width:100%; background-color:gray; height:180px; } div#manga1{ position:absolute; top:5px; width:100%; } div#manga1 ol,div#manga1 ol li{ list-style-type:none;display:block; margin:0;padding:0; } div#manga1 ol{ width:205px;height:170px; margin:0 auto; overflow:hidden; position:relatve; background-color:white; } div#manga1 ol li{ width:100%;height:100%; } div#manga1 ol li a{ display:block; width:196px;height:167px; margin:auto; text-indent:-200px; background-image:url(./images/Petit_Sammy_eternue.jpg); } div#manga1 ol li a[href="#C2"]{width:196px;height:167px;background-position:0px 0px;} div#manga1 ol li a[href="#C3"]{width:191px;height:167px;background-position:-196px 0px;} div#manga1 ol li a[href="#C4"]{width:195px;height:167px;background-position:-2px -165px} div#manga1 ol li a[href="#C5"]{width:191px;height:169px;background-position:-199px -166px;} div#manga1 ol li a[href="#C6"]{width:204px;height:169:px;background-position:0px -331px;} div#manga1 ol li a[href="#C1"]{width:185px;height:165px;background-position:-202px -335px;} --> ＿</style> <style type="text/css" media="print"> <!-- div#manga1 ol,div#manga1 ol li{ list-style-type:none; margin:0;padding:0; } div#manga1 ol{ width:400px; } div#manga1 ol li{float:left; } --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div id="manga1"> ＿＿＿<ol> ＿＿＿＿<li id="C1"><a href="#C2"><img src="./images/Petit_Sammy_eternue_1.jpg" width="196" height="167" alt="は"></a></li> ＿＿＿＿<li id="C2"><a href="#C3"><img src="./images/Petit_Sammy_eternue_2.jpg" width="191" height="167" alt="はあ"></a></li> ＿＿＿＿<li id="C3"><a href="#C4"><img src="./images/Petit_Sammy_eternue_3.jpg" width="195" height="167" alt="はあ～"></a></li> ＿＿＿＿<li id="C4"><a href="#C5"><img src="./images/Petit_Sammy_eternue_4.jpg" width="191" height="169" alt="はあ～く"></a></li> ＿＿＿＿<li id="C5"><a href="#C6"><img src="./images/Petit_Sammy_eternue_5.jpg" width="204" height="169" alt="はあ～くしょん"></a></li> ＿＿＿＿<li id="C6"><a href="#C1"><img src="./images/Petit_Sammy_eternue_6.jpg" width="185" height="165" alt="・・・・"></a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、iframeは、他のページをブラウザで開くという動作とまったく同じことであることを理解して使わなければ・・・ ⇒16.5 行内フレーム: IFRAME要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/frames.html#h-16.5 ) HTML4.01では非推奨ですが・・ ＞CSSを用いる方法でも構いませんので、 それも原理的に無理です。 なぜなら、そのページ画像をブラウザで開いてブラウザの幅が狭いと縮小されるのですからね。呼び出し先がHTMLでしたらそうはなりません。 そもそも、iframeをそのような目的で使用するのが間違っています。!!! ＞画像の一部分だけを紙芝居のように見せるためにフレームのサイズを限定しています。 その場合は、objectかimg要素を使用するべきです。 また、単にDIVなどを使用して背景として表示させても良い。 一枚の画像の一部を見せるのですから、都度読み込むことに比較して、表示はとても速いです。
- Heuchler
- ベストアンサー率80% (4/5)
例に挙げられたのは、フレームを100x100サイズに指定してフレームサイズをユーザーが変更できないようにし フレーム内に**.jpgを表示するという記述ですが(resizeの初期値はnoneです) これは原寸表示ではないのですか？スクロールで全体見れますよね？ フレームサイズを変更させないようにして、フレームサイズより大きい画像を表示しますと画像の一部分だけが表示されます やりたいことがいまいち伝わりません imgタグで画像サイズを指定するだとかしないと縮小はされないと思いますが フレームサイズを画像サイズに合わせたいということでしょうか？
補足
ご回答ありがとうございます。 画像の一部分だけを紙芝居のように見せるために フレームのサイズを限定しています。 通信速度の遅いユーザーには子供ページを表示させると 画像の描画がかなり遅れてしまうため img tag を使わずに、 iframe src から直接に画像を読ませるように 意図的にこのような工夫をしています。 resize が IE では無効であることを確認しましたので 代わりの方法をお教えいただけますよう よろしくお願いいたします。