ホームページ > 記事 > ウェブフロントエンド > CSS の最小幅と最大幅を設定する方法
CSS 基本構文構造
min-width と max-width の後には特定の数値 + HTML ユニットが続きますmin-width:50px 最小幅は 50px ですmax- width:50px 最大幅は 50pxCSS スタイル構造p{min-width:50px}p{max-width:50px}1. css 2. -高さ4、CSS 高さ
実践的な応用手順
最小幅 (min-width) と最大幅 (max-width) は、画像の最小幅と最大幅の制限を設定するためによく使用されます。 。たとえば、画像がメインリストとして使用され、オブジェクト内の画像のサイズが可変である場合、サイズが小さくなりすぎて一貫性がなくなるのを避けるために、CSS の最小幅スタイルを使用できます。別の例として、ボックス内に記事と画像が混在している場合、画像の幅が決まらない場合があります。このとき、html img の画像の幅が p ボックスの幅を超えると、画像がバーストする可能性があります。 p ボックスを使用すると混乱が生じます。
詳細な説明:
1. 画像の高さと幅を設定するための CSS
2. 画像が大きすぎて DIV Web ページが壊れるという問題を解決する CSS
3. html
img タグmin-width と max-Width の使用例 2 つの P ボックスを設定し、それぞれ最大幅と最小幅のスタイルを設定し、CSS 境界線を 1px、CSS カラーを赤い実線ボックス、CSS 高さを 1px に設定します。 100ピクセル。 1 番目と 2 番目のボックスの CSS 名はそれぞれ css-min-width と css-max-width です。最初のボックスの画像の元の画像サイズは幅 165 ピクセル、高さ 60 ピクセルです。 2 番目のボックスは幅 375 ピクセル、高さ 65 ピクセルです。
ケースCSSコード
.css-min-width,.css-max-width{ height:100px; border:1px solid #F00} .css-min-width img{ min-width:200px} .css-max-width{margin-top:10px} /* css注释:margin-top设置css-max-width对象上间距为10px */ .css-max-width img{ max-width:200px; }
CSS+DIVケースHTMLソースコードスニペット
<p>原图片大小:<br /> <br /> <img src="http://www.php.cn" /><br /><br /> 宽为165px 高度60px<br /> <br /> <img src="http://www.php.cn" /><br /><br />
幅は375px、高さは65pxです
94b3e26ee717c64999d7867364b1b4a3
ケースは次のとおりです:
<p class="css-min-width"> <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> </p> <p class="css-max-width"> <img src="http://www.PHP.com/img201301/topad1.gif" />
最小値はどうですか?今日の CSS の -width と max-width の設定はこれですべてです。必要な友達は保存してください。このサイトの他の更新にも引き続き注目してください。
推奨読書:以上がCSS の最小幅と最大幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。