ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS(3ページ目)

画像の表示サイズをブラウザのウインドウ幅や端末の画面幅に自動で合わせたい場合があります。CSSを使えば画面幅と画像サイズを合わせるのは簡単ですが「拡大されすぎ/縮小されすぎ」を防ぎたいこともあります。「画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない」、「画像を画面幅に合わせて表示したいが、極端な拡大や縮小は避けたい」など、画像サイズの自動調整に上限や下限を設けるCSSを解説。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像を画面幅に合わせたい際の、その他の方法

前ページでご紹介した方法は、ウェブページ上に最初から表示されている画像のサイズを、閲覧者の画面幅(またはウインドウ幅)に自動で合わせる方法でした。しかし、閲覧者の環境に合わせて画像を自動調整する方法としては、それ以外にもいくつかあります。

以下に、2種類(3記事)だけご紹介しておきます。ぜひ参考にして下さい。



参考1:サムネイルがクリックされたときに拡大画像を表示する方法

例えば、「最初はサムネイル画像(縮小された画像)だけを並べておき、ユーザがクリックした際にだけ画面サイズに合致した拡大画像をポップアップさせて表示する」といったテクニックもあります。

最初はサムネイルだけを見せておく場合の方法まとめ:
そのような方法は、記事「別窓を開かずに その場で拡大画像を表示する4つの方法」にまとめて解説していますので別途ご参照下さい。この方法だと、Lightbox系スクリプトを併用する必要があるため、CSSだけで実現できる本記事の方法より若干は面倒になります。しかし、見せたい画像がたくさんある場合はこの方が便利でしょう。

Lightbox系スクリプトを使って、サムネイル画像クリックで拡大画像を表示する方法もある

Lightbox系スクリプトを使って、サムネイル画像クリックで拡大画像を表示する方法もある



 
画像を全画面で見せたい場合
閲覧者の画面サイズを最大限に利用して拡大画像を表示させたい場合は、画像を全画面で表示してくれるスクリプトを使うと楽です。その方法は記事「サムネイル画像をその場で全画面に拡大表示させる方法」で解説しています。

拡大画像を全画面で表示できるスクリプトの例

拡大画像を全画面で表示できるスクリプトの例



 

参考2:閲覧者の画面解像度に合わせて表示画像を切り替える方法

画像の表示サイズを変化させるのではなく、閲覧者の画面環境に応じて表示する画像そのものを別の画像に切り替える方法もあります。

解像度の高い画面にだけ高解像度の画像を表示する方法
表示候補として複数の画像ファイルを用意しておき、閲覧者の画面環境に応じて適した画像を自動選択して表示させる方法として、HTML5のsrcset属性があります。詳しくは記事「解像度の高い画面にだけ高解像度の画像を表示する方法」で解説しています。

閲覧者の画面解像度に応じて、複数の表示候補の中から適した画像ファイルを自動選択して表示する方法もある

閲覧者の画面解像度に応じて、複数の表示候補の中から適した画像ファイルを自動選択して表示する方法もある




 

画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS

今回は、画像の表示サイズを自動で閲覧者の画面サイズに合わせたい場合に遭遇する、ちょっとした問題を解決するためのCSS記述方法をご紹介いたしました。レスポンシブWebデザインを採用したページなどで特に便利に活用できるでしょう。ぜひ、試してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます