サイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。
最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなおさなくても良いデザイン)でも、ウインドウ幅に合わせて画像が拡大縮小する手法はよく用いられています。
今回は画像をウインドウ幅に合わせて拡大、縮小する方法をご紹介します。
通常のimgタグで画像を貼り付けた場合
ウインドウ幅が十分ある場合は画像は全て表示されています。
ウインドウ幅を狭くすると、画像がはみ出てしまっています。
スタイルシートにたった2行書くだけで解決
この画像がはみ出てしまうのを解決するためにはスタイルシートを使います。
スタイルシートに以下のように追加してください。これで縦横比を保持したまま、画像がウインドウ幅に合わせて自動的に拡大縮小します。拡大に関しては元の画像サイズ以上の大きさにはならないのでウインドウ幅いっぱいに画像が拡大表示されてしまうこともありません。
img {
max-width: 100%;
height: auto;
}
ウインドウ幅を狭くしてもこのとおり。
ちなみにウインドウ幅いっぱいに画像を表示したい場合は、max-widthのmax-を外して、このように書けば縦横比を保持したままウインドウ幅いっぱいに画像が表示されます。
img {
width: 100%;
height: auto;
}
レスポンシブデザインに限らず、様々な環境で閲覧されるウェブサイトの画像表示には欠かせない手法ですね。
ちなみに画像はアイスケットの動画作成のチラシです。市内すべての幼稚園・保育園に配布するの大変でした。
本日は以上です。
- 投稿タグ
- CSS
![[JavaScript]子ウインドウから親ウインドウを更新する方法](https://isket.jp/wordpress/wp-content/uploads/2015/03/iSKET_small.png "[JavaScript]子ウインドウから親ウインドウを更新する方法")
参考になりました。
ありがとうございます
アリス様
コメントありがとうございます！
画像の幅を自動調整にしておくと、スマホなどで見た時に最適化してくれるので便利ですよー。
レスポンスウェブデザインをCSSソースで書いて画像をウインドウ幅に合わせるテストをしておりますが、巧くゆきません。テストソースは下記です。何事も初心者ですが何が悪いのかご教授頂けましたならば幸いに存じ上げます。
よろしくお願いいたします。
コスモスの花あす公園
成功したようで良かったですね！
また何かありましたらお気軽にご質問ください。
上記のタグですが、ページの何処に記入するのか教えて下さい。
当方、HPビルダー１１で作っているので、タグは、わかりません。
試しに、ページを作って画像を８００×６００です。
img {http://bgmusic888.web.fc2.com/iruka.html
PCで見たり、スマホで見たりする時に、ページの大きさを自動で合わせたい
width: 100%;
height: auto;
}
HEADタグを閉じる前に入れると出来ますー
<HEAD> ～省略～ <TITLE></TITLE> <style type="text/css"> img { max-width: 100%; height: auto; } </style> </HEAD>ありがとうございます。おせわになります。タグを入力したことが無いので、たびたび、すみませんが、画面のサイズは標準で、１０２４×７６８ ぐらいが、いいのでしょうか？８００と６００では、それ以上には広がりませんでした。入力ミスですか？
それと、フラッシュをはめこむと、スマホだと、小さく表示されてしまいます。
こんにちは！
先程のコードで縮小は問題なくできると思います。
画面サイズですが、最近のパソコンはワイド画面なので、1000pxはあったほうが良いと思います。あまり狭いと真ん中にちょこんと表示されるだけになってしまい、寂しい印象となってしまいます。
画面いっぱいに画像を拡大する場合は、max-widthのmax-を消して、再読み込みをしてみてください。画像が画面いっぱいに広がります。
またフラッシュはスマホで見られないので使用しないことを薦めます。これからサイトを作るのであれば、フラッシュは使わないほうが良いですよー。
ありがとうございます。スッキリしました。
スッキリ解決できて良かったです！分からないことがあればいつでもどうぞー
Pingback: 参考にしたリンク集 – すみココレクト
縦も幅、同様に成るの？
なりますよー
ホームページ全体で幅は成ったけど‥縦は
成らなかった？再度、確認します。
ありがとうございます。
すごいんです！ほんとうに効きました！
バカな私は画像がはみ出すことで一日悩んだのになぁ…
ありがとうございました！
お役に立てて良かったです！
有り難う御座います！参考になりました。
img {
max-width: 100%;
height: auto;
}
これを書き込んでおくと、
テーブルのセル内の画像はそのセルの幅を指定するだけで
自動的に縮小されテーブルが崩れなくなるみたいですね。
全体に対して有効になるので、便利です。
早速使わせて頂きました。
コメントありがとうございます。
お役に立てて光栄です！