Max-Width（CSSプロパティ）

説明

このプロパティは、ブロックまたは交換された要素の最大コンテンツ幅を設定します。この最大幅には、パディング、境界、マージンは含まれません。

最大幅が適用される要素は、幅のプロパティがより広く設定されていても、指定された値よりも広くなることはありません。ただし、このルールには例外があります。ただし、最大幅の値よりも大きい値でmin-widthが指定されている場合、コンテナの幅は最大の値になります。

最大幅は、関係する要素の幅範囲を生成するために、最小幅と組み合わせてよく使用されます。 最大幅と幅を組み合わせます

一方が他方を無効にするため、同じユニットを使用して同じ要素に最大幅と幅と幅を適用しないでください。たとえば、幅が150pxに設定され、最大幅が60pxに設定されている場合、要素の実際の幅は60pxになり、幅宣言は冗長になります。

次のスタイルルールは、同じユニット（この場合はピクセル）を使用して幅と最大幅の両方を要素に与えられている場合、競合がどのように解決されるかを示しています。

上記の例では、要素の幅は60pxに固定されます。 ただし、値が異なる単位である場合、最大幅と幅を設定することは許容されます（完全に有用ではないかもしれませんが、それが良い効果を得るために使用できるいくつかのケースがあります）。 このスタイルのルールは、160pxの最大幅をクラス「例」の画像に割り当て、50％の幅を割り当てます。

上記の例の画像の最終幅は、最小値になります。

ページの幅が小さいときに画像を拡大したい場合、画像が列から抜け出さないようにする場合、上記の例を使用して、利用可能なスペースが160ピクセル未満になると画像のサイズが小さくなることを確認できます。

.example {
  max-width: 60px;
  width: 150px;
}

利用可能なスペースが160ピクセルを超える場合、画像は幅160ピクセルになるまで拡張されますが、それ以上はありません。これにより、スペースが許せば、画像が賢明なサイズ、またはその正しいアスペクト比を保証します。

このシナリオの逆に最小幅のプロパティを使用できます。

ブロックの内容が設定された制限によって許可されているよりも多くの水平スペースを必要とする場合、動作はオーバーフロープロパティによって定義されます。

例

このスタイルルールは、最大幅400ピクセルの幅と最小幅100ピクセルを、ID「例」とともに要素内の段落に割り当てます。

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

値

プロパティは、CSSの長さ（PX、PT、EMなど）、パーセンテージ、またはキーワードなしを取得します。負の長さの値は違法です。

割合値は、含まれるブロックの幅を指します。含まれるブロックの幅が負の場合、使用される値はなしです。

CSS最大幅プロパティに関するよくある質問（FAQ）

CSSの幅と最大幅の差は何ですか？

CSSの幅プロパティは、要素の特定の幅を設定しますが、最大幅プロパティは要素が伸びる可能性のある最大幅を設定します。要素内のコンテンツが最大幅のセットよりも大きい場合、最大値に自動的に調整されます。ただし、コンテンツが小さい場合、コンテンツのサイズに関係なく設定された幅を維持する幅プロパティとは異なり、コンテンツが収縮してコンテンツに適合します。これにより、Webページがデバイス画面のサイズに基づいてレイアウトを調整できます。最大幅を設定することにより、より大きな画面では、コンテンツが特定のポイントを超えて伸びることなく、読みやすさと設計の完全性を維持することを保証します。小さい画面では、コンテンツが画面サイズに合うように調整されます。

最大値でパーセンテージ値を使用できますか？パーセンテージは、親要素の幅に関連しています。たとえば、要素の最大幅を50％に設定すると、親要素の幅の半分が最大になります。たとえば、幅が500pxに設定され、最大幅が400pxに設定されている場合、ブラウザは400px値を使用します。ただし、最大幅が最小幅よりも小さい場合、最小値が使用されます。これにより、要素が指定された最小幅よりも小さくならないようにします。

すべてのHTML要素で最大幅を使用できますか？インライン要素やテーブルの行と行のグループには適用されません。

最大幅は画像でどのように機能しますか？

画像で使用すると、最大幅は画像のアスペクト比を維持しながら、特定のポイントを超えて伸びるのを防ぎます。これは、画像サイズを画面サイズに基づいて調整する必要があるレスポンシブデザインで特に役立ちます。これは、CSSがHTMLよりも高い特異性を持っているためです。

は、すべてのブラウザで最大幅がサポートされていますか？

はい、Max-widthは、Chrome、Firefox、Safari、Edge、Internet Explorer 9などを含むすべての最新のブラウザーでサポートされています。

最大幅で使用できるユニット

max-widthは、ピクセル（PX）、EMS（EM）、REMS（REM）、パーセンテージ（％）、およびビューポート単位（VW、VH）を含むいくつかのユニットを受け入れることができます。各ユニットには独自のユースケースがあり、設計の特定の要件に基づいて使用できます。

以上がMax-Width（CSSプロパティ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。