iframe 内の画像を自動縮小させない方法

解決済

質問者：mqm
質問日時：2013/11/17 18:11
回答数：3件

iframe 内の画像を自動縮小させない方法が分かりません。

<iframe src="**.ｊｐｇ" width="100" height="100" scrolling="yes"
style= resize:none; ">

このような　resize 禁止指定をしても、画像がフレームのサイズに強制的に押し込まれて
原寸表示ができません。

CSSを用いる方法でも構いませんので、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2013/11/18 16:54

ごく簡単な例です。

何はともあれ順当に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">

＿</style>
<style type="text/css" media="print">

</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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2013/11/18 12:09

まず、iframeは、他のページをブラウザで開くという動作とまったく同じことであることを理解して使わなければ・・・

　⇒16.5 行内フレーム: IFRAME要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　HTML4.01では非推奨ですが・・

＞CSSを用いる方法でも構いませんので、
　それも原理的に無理です。
　なぜなら、そのページ画像をブラウザで開いてブラウザの幅が狭いと縮小されるのですからね。呼び出し先がHTMLでしたらそうはなりません。

　そもそも、iframeをそのような目的で使用するのが間違っています。!!!

＞画像の一部分だけを紙芝居のように見せるためにフレームのサイズを限定しています。　　その場合は、objectかimg要素を使用するべきです。
　また、単にDIVなどを使用して背景として表示させても良い。
　一枚の画像の一部を見せるのですから、都度読み込むことに比較して、表示はとても速いです。

- 0
- 件

通報する

No.1

回答者： Heuchler
回答日時：2013/11/18 05:11

例に挙げられたのは、フレームを100x100サイズに指定してフレームサイズをユーザーが変更できないようにし

フレーム内に**.jpgを表示するという記述ですが(resizeの初期値はnoneです)
これは原寸表示ではないのですか？スクロールで全体見れますよね？
フレームサイズを変更させないようにして、フレームサイズより大きい画像を表示しますと画像の一部分だけが表示されます

やりたいことがいまいち伝わりません
imgタグで画像サイズを指定するだとかしないと縮小はされないと思いますが
フレームサイズを画像サイズに合わせたいということでしょうか？

この回答への補足

ご回答ありがとうございます。
画像の一部分だけを紙芝居のように見せるために
フレームのサイズを限定しています。

通信速度の遅いユーザーには子供ページを表示させると
画像の描画がかなり遅れてしまうため
img tag を使わずに、
iframe src から直接に画像を読ませるように
意図的にこのような工夫をしています。

resize が　IE　では無効であることを確認しましたので
代わりの方法をお教えいただけますよう
よろしくお願いいたします。

補足日時：2013/11/18 07:40

通報する