• 締切済み

img

大きい画像にスクロールを表示させたいです。 <img>タグのみでスクロールを表示させる方法を探しています。 img{ display:block; overflow:auto; } なんて風にやっても、<img>はブロック要素にはなりませんか? <div>で囲えばできるんですけど。

みんなの回答

  • k17s
  • ベストアンサー率47% (9/19)
回答No.3

自分なりに調べてみたところimgタグだけではできなさそうです。 インラインフレームで画像を開くってのはどうでしょう? <IFRAME width="100" height="100" src="image.jpg">

noname#39145
質問者

お礼

やはりimgタグだけでは無理ですか・・・。 わざわざありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。
  • goldfox
  • ベストアンサー率49% (123/249)
回答No.2

なぜbodyのスクロールバーではいけないのか、なぜimg要素だけでしかいけないのかを説明したほうが、的確な回答が得られやすくなるのではないかと思うのですが、いかがでしょう。

noname#39145
質問者

補足

> なぜimg要素だけでしかいけないのか 理由は以下の通りです。 1. 複数の方がHTMLを書くので、画像を表示させるときの記述ルール(imgタグをdivタグでクラスを指定して囲むなど)を設定、認識させなくてはらないのは避けたい。 HTMLの知識の少ない人でも、簡単に書けるようにimgタグだけで対応できればベスト。 <img src="./sample.png">程度で済ませたい。 2. 現状で多数のHTMLファイルのソースがimgタグのみで書かれています。 これらをすべて変更するのは困難だからです。 こちらはスクリプトなどで対応できそうですが。 > なぜbodyのスクロールバーではいけないのか ヘッダ、サイドバー、コンテンツ、フッタ、というよくある構成においてです。 bodyのスクロールバーは試していませんが、コンテンツエリア全体のスクロールバーは試しました。 この場合、横長の画像などを表示させた場合に、スクロールは発生します。 しかし、コンテンツのエリアは縦に無制限なため、縦長のページだった場合に、ブラウザ全体の縦スクロールを一番下まで表示させないと、上記のコンテンツの横スクロールを操作(表示)できないということです。 文章で説明すると難しいので、うまく伝わっているかわかりませんが、そんなところです。

全文を見る
すると、全ての回答が全文表示されます。
noname#150436
noname#150436
回答No.1

イメージタグ <img src="×××.gif"> 画像をスクロールさせる http://iswebmag.hp.infoseek.co.jp/sample186.html

noname#39145
質問者

お礼

> <img>タグのみでスクロールを表示させる方法を探しています。 回答していただいて申し訳ないのですが、<img>タグのみでの対応を探しています。 しかし、こんなタグもあるんですね。 勉強になりました。 回答ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • imgタグは何で囲むのが良いか

    皆さんはimgタグは何で囲んでいますか? <div> <h3>タイトルタイトル</h3> <p>テキストテキストテキストテキストテキストテキスト</p> <img src="xxxx.jpg" alt=""> </div> 例えばこういうような時に、何で囲むべきかというのをいつも迷います。 ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、 pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。 最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、 altを空にしているものは囲まずにそのまま置いたりしています。 レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。 私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。 スマートなやり方をご教授ください。

    • ベストアンサー
    • HTML
  • なぜimg要素は閉じるタグ</img>が無いので

    なぜimg要素は閉じるタグ</img>が無いのでしょうか?

    • ベストアンサー
    • HTML
  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS
  • IE7の<div>のバグ

    IE7でgooglemapの表示がおかしくなります。 <div id=~>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id~>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。

  • <img src=

    いくつかの画像を表示させたいのですが・・ <img src="1番目の画像URL"border="0"><img src="2番目の画像URL"border="0"> とタグを貼ると、画像同士がピッタリくっついてしまいます、 この間隔を開ける方法? いろいろ調べていますがみつかりません・・ 普通にスペースを入れたら[_]表示になってしまいました、 間隔を開ける方法を教えて下さい。お願いします・・

    • ベストアンサー
    • HTML
  • cssで画像を中央に表示する方法

    http://wayohoo.com/programming/css/how-to-center-the-img-tag.html を参考にしたのですが、 「imgをdivで囲って画像を中央揃えする方法。」なら、画像を中央に表示できるのに、 「imgに埋め込んだclassを使って画像を中央揃えする方法。」だとできません。 【サンプル】 <style type="text/css"> img.line{ width: 700px; margin-left: auto; margin-right: auto; } div.center{ text-align: center; } </style> </head> <body> <img class="line" src="http://test/line.jpg"> <div class="center"><img src="http://test/line.jpg" /></div> </body> のように2つの画像を表示させた場合、divタグのほうは、ちゃんと真ん中に表示されますが img class="line" のほうはされません。 しかし、img class="line" の方でも、画像のサイズは調整できています。 margin-left: auto; margin-right: auto; の部分の何が間違ってるのでしょうか?

    • 締切済み
    • CSS
  • イメージをセンタリングさせてかつ改行させない

     イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。  イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。  中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか?

    • ベストアンサー
    • CSS
  • <div style="overflow">でこんなことは出来ませんか?

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • <img>タグの数の表示

    画像表示掲示板で 表示されている画像の数を<img>タグの数を数えて最後に 表示されている画像の総数=<img>タグの数 を表示させたいのですが<img>タグの数はどのようにして得られるでしょうか?