• 締切済み

画像を一杯に表示できない

PCでもスマホでも画像を幅一杯に表示させたいです。全画面表示ではありません。できればCSSファイルは別途作成せず、１つのHTMLファイルですませたいです。そこで以下のソースを書きましたが、画像x.jpgのサイズが、画面の大きさを変えても、変わりません <head> <style type="text/css"> img.example1 { width: 100%; height:auto; } </style> </head> <body> <div align="left"> <table width="100%" align="left" bgcolor="#FFFFFF"> <tr> <td width="100%"> <p><img src="x.jpg" alt="x" "class="example1"> </p> </img> </td> どうしたら良いでしょうか？

  • CSS
  • 回答数3
  • ありがとう数0

みんなの回答

回答No.3

おそらく下記のようなHTMLとCSSを書いていけば、ご質問のとおりに表示できるのではないかと思います。 <head> <style> table { width: 100%; height: auto; } img.example1 { width: 100%; height: auto; } </style> </head> <body> <table> <tr> <td> <img src="x.jpg" alt="x" class="example1" /> </td> </tr> </table> </body> ちゃんと表示できないのは、申し訳ないですがHTMLとCSSの書き方が全体的に間違っているからです。 ・<div align="left">は不要 ・"class="example1"じゃなくてclass="example1" ・<img>は空要素なので</img>は不要 ・<img src="x.jpg" alt="x" class="example1" />または<img src="x.jpg" alt="x" class="example1">が正しい書き方 ・</tr>がない ・</table>がない ・</body>もない パッと思いつくだけでも、これだけのミスがあります。必要なHTMLタグを書いていなかったり、あるいは反対に不必要なタグを書いていたりすると、表示が崩れる原因になりかねません。また、CSSのclass指定を少しでも間違えてしまうと、これまたCSSが効かなくなって迷ってしまう原因になります。「"」の書き方を一ヶ所間違えただけでも動かなくなりますので、とにかく注意してください。 ここで全部説明するのは難しいですから、できれば参考書などが手元にあるとわかりやすいと思います。<table>を使った書き方も少し古いので、新しめの本を探してみてもいいかもしれません。

参考URL：
http://htmq.com/selector/class.shtml
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

"class="example1" 先頭の " は不要。 また、</img>も間違いで不要です。

  • 9133313
  • ベストアンサー率19% (266/1349)
回答No.1

CSSを使わず、HTMLだけで対応するなら、下記のような記述で、要望が満たせると思います。 初期表示は横320×縦240に縮小表示し、選択されたら" target="_blankで新画面に原寸の画像を表示するように定義してあります。 <head></head> <body> <a href="stella/kit.jpg" target="_blank"><img src="stella/kit.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240"></a> <a href="stella/cover.jpg" target="_blank"><img src="stella/cover.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240"> </a> <a href="stella/insert.jpg" target="_blank"><img src="stella/insert.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240" /></a> <a href="stella/bunki.jpg" target="_blank"><img src="stella/bunki.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240" /></a> <a href="stella/kit.jpg" target="_blank"><img src="stella/kit.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240"></a> <a href="stella/cover.jpg" target="_blank"><img src="stella/cover.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240"> </a> <a href="stella/insert.jpg" target="_blank"><img src="stella/insert.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240" /></a> <a href="stella/bunki.jpg" target="_blank"><img src="stella/bunki.jpg" border="0" style="border-top-width : 0px;border-left-width : 0px;border-right-width : 0px;border-bottom-width : 0px;" width="320" height="240" /></a> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する