ホームページ > 記事 > ウェブフロントエンド > CSSで画像を変形させない方法
CSS で画像の非変形を実現する方法: 最初に HTML サンプル ファイルを作成し、本文に img タグを追加して画像を導入し、最後に「max-height」または「」を設定することで実現します。 max-width"属性 画像を変形する必要はありません。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
画像を変形させたくない場合は、max-height または max-width のいずれかを設定するか、width または height のいずれかを固定します。
max-height 属性と max-width 属性は、要素の最大の高さと幅を設定します。
属性値:
none デフォルト。この定義では、要素に許可される最大高さに制限はありません。
length は、要素の高さの最大値を定義します。
% は、最大の高さを、それを含むブロック レベルのオブジェクトに基づくパーセンテージとして定義します。
inherit は、max-height 属性の値を親要素から継承することを指定します。
高さと幅の属性は、要素の高さと幅を設定します。
属性値:
auto デフォルト。ブラウザは実際の高さを計算します。
length px、cm などの単位を使用して高さを定義します。
% それを含むブロックレベルのオブジェクトの高さのパーセンテージに基づきます。
inherit は、高さ属性の値を親要素から継承することを指定します。
例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { float: left; } .test1 img { width: 187.5px; height: 156.5px; } .test2 img { width: 300px; height: 100px; } .test3 img { max-width: 300px; max-height: 100px; } .test4 img { max-width: 100%; height: 200px; } .test5 { width: 300px; height: 200px; } .test5 img { max-width: 100%; max-height: 100%; } .test6 { width: 300px; height: 100px; /*overflow: hidden;*/ } .test6 img { max-width: 300px; max-height: 100px; } .test7 { width: 300px; height: 100px; /*overflow: hidden;*/ } .test7 img { max-width: 300px; } </style> </head> <body> <div class="test1"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test2"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test3"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test4"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test5"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test6"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </div> <div class="test7"> <img src="1.jpg" / alt="CSSで画像を変形させない方法" > </body> </html>
効果は次のとおりです:
[推奨学習: css ビデオ チュートリアル]
以上がCSSで画像を変形させない方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。