神奈川県相模原市ホームページ制作、SEO対策、運用ならアイスケットは神奈川県相模原市のホームページ制作、システム開発、パソコン・スマホに関するサポートを行う会社です。カテゴリー:プログラミングサイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなおさなくても良いデザイン)でも、ウインドウ幅に合わせて画像が拡大縮小する手法はよく用いられています。今回は画像をウインドウ幅に合わせて拡大、縮小する方法をご紹介します。通常のimgタグで画像を貼り付けた場合ウインドウ幅が十分ある場合は画像は全て表示されています。ウインドウ幅を狭くすると、画像がはみ出てしまっています。スタイルシートにたった2行書くだけで解決この画像がはみ出てしまうのを解決するためにはスタイルシートを使います。スタイルシートに以下のように追加してください。これで縦横比を保持したまま、画像がウインドウ幅に合わせて自動的に拡大縮小します。拡大に関しては元の画像サイズ以上の大きさにはならないのでウインドウ幅いっぱいに画像が拡大表示されてしまうこともありません。auto;}ウインドウ幅を狭くしてもこのとおり。ちなみにウインドウ幅いっぱいに画像を表示したい場合は、max-widthのmax-を外して、このように書けば縦横比を保持したままウインドウ幅いっぱいに画像が表示されます。auto;}レスポンシブデザインに限らず、様々な環境で閲覧されるウェブサイトの画像表示には欠かせない手法ですね。ちなみに画像はアイスケットの動画作成のチラシです。市内すべての幼稚園・保育園に配布するの大変でした。22:42参考になりました。15:59レスポンスウェブデザインをCSSソースで書いて画像をウインドウ幅に合わせるテストをしておりますが、巧くゆきません。テストソースは下記です。何事も初心者ですが何が悪いのかご教授頂けましたならば幸いに存じ上げます。08:49成功したようで良かったですね!また何かありましたらお気軽にご質問ください。13:15上記のタグですが、ページの何処に記入するのか教えて下さい。当方、HPビルダー11で作っているので、タグは、わかりません。試しに、ページを作って画像を800×600です。15:14ありがとうございます。いいのでしょうか?800と600では、それ以上には広がりませんでした。入力ミスですか?それと、フラッシュをはめこむと、スマホだと、小さく表示されてしまいます。15:27こんにちは!先程のコードで縮小は問題なくできると思います。画面サイズですが、最近のパソコンはワイド画面なので、1000pxはあったほうが良いと思います。狭いと真ん中にちょこんと表示されるだけになってしまい、寂しい印象となってしまいます。画面いっぱいに画像を拡大する場合は、max-widthのmax-を消して、再読み込みをしてみてください。画像が画面いっぱいに広がります。フラッシュはスマホで見られないので使用しないことを薦めます。これからサイトを作るのであれば、フラッシュは使わないほうが良いですよー。16:18ありがとうございます。15:14ホームページ全体で幅は成ったけど..縦は成らなかった?再度、確認します。ありがとうございます。16:20有り難う御座います!参考になりました。auto;}これを書き込んでおくと、テーブルのセル内の画像はそのセルの幅を指定するだけで自動的に縮小されテーブルが崩れなくなるみたいですね。全体に対して有効になるので、便利です。20:02コメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。新年あけましておめでとうございます。ブログお問い合わせ[サービス対応地域]直接お伺いしてお打ち合わせ可能な地域は神奈川県相模原市とその周辺地域となります。ご遠方のお客様の場合はお電話、メールでご対応をさせて頂きます。ご相談は無料でさせて頂いております。technology.。