ホームページ > 記事 > ウェブフロントエンド > CSSで画像を変形させない方法
CSSで画像を変形させない方法
- 藏色散人オリジナル
- 2021-04-08 09:36:226044ブラウズ
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 サイトの他の関連記事を参照してください。