ホームページ > ウェブフロントエンド > CSSチュートリアル > ブラウザのサイズ変更時に画像が不当に縮小しないようにするにはどうすればよいですか?

ブラウザのサイズ変更時に画像が不当に縮小しないようにするにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-12 17:05:02
オリジナル
579 人が閲覧しました

How to Prevent Images from Shrinking Disproportionately on Browser Resize?

CSS: ブラウザーのサイズ変更時に画像を縮小する

管理パネルから画像を構成する場合、ユーザーは、ブラウザウィンドウのサイズが変更されます。この問題は、CSS プロパティと画像のアスペクト比の間の相互作用を理解することで解決できます。

提供される CSS ルールには、最初は max-width プロパティと height プロパティの両方が含まれており、ブラウザのサイズを変更すると、望ましくない縮小が発生する可能性があります。これを防ぐには、1 つの次元 (通常は最大幅) のみを指定し、もう 1 つの次元を auto に設定する必要があります。

例:

1

2

3

4

5

.users-list > li img {

  border-radius: 50%;

  max-width: 100%;

  height: auto;

}

ログイン後にコピー

このアプローチでは、画像のアスペクト比を調整しながら、利用可能なスペースに合わせて適切に拡大縮小できるようにします。以下の「正しい」例に見られるように、画像は比率を維持し、過度に伸びたり縮んだりしません。

不正解:

1

2

3

max-width: 100%;

width: 100px;

height: 100px;

ログイン後にコピー

正解:

1

2

max-width: 200px;

height: auto;

ログイン後にコピー

以上がブラウザのサイズ変更時に画像が不当に縮小しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート