ホームページ > 記事 > ウェブフロントエンド > CSSで画面ごとに画像のサイズを変更する方法

CSSで画面ごとに画像のサイズを変更する方法

藏色散人オリジナル: 2020-12-08 09:40:528200ブラウズ

画像のサイズを画面に合わせて変更する CSS メソッド: 1. "width height auto" 属性を使用して画像を拡大縮小します; 2. "max-width max-height" 属性を使用して最大値を設定します幅と高さ。

このチュートリアルの動作環境: Windows 7 システム、css3 バージョン、Dell G3 コンピューター。

推奨: 「css ビデオチュートリアル」

画像を画面サイズに合わせて拡大縮小したい場合があります。次の 2 つの状況があります:

#単一画像のスケーリング

ボックス内の画像のスケーリング

ヌード画像のスケーリング

<style type="text/css">
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
</style>
<body>
  <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
</body>

CSSで画面ごとに画像のサイズを変更する方法

画像はボックス内にあります

<style type="text/css">
  #box {
    width: auto;  /* 盒子也要自动缩放 */
    height: auto; 
    max-width: 600px;
    max-height: 500px; /* 盒子的高度,需要大于图片100%宽度时 图片的高度 */
    border: 5px solid yellow;
  }
  img {
    width: auto;
    height: auto;
    max-width: 100%; /* 只要宽度100% 结合前面 auto就可以了 */
  }
</style>
<body>
  <div id="box">
    <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" />
    下面的文字
  </div>
</body>

CSSで画面ごとに画像のサイズを変更する方法

ps:

1.幅高さの自動を使用してズームします

2. max-width max-height を使用して、最大幅と高さを設定します。100% は元の最大値を意味します。

以上がCSSで画面ごとに画像のサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSウェイトの計算方法次の記事：CSSウェイトの計算方法

続きを見る