ホームページ > 記事 > ウェブフロントエンド > img要素にCSSを使用できますか?
img要素にCSSを使用できますか?
- 藏色散人オリジナル
- 2021-01-11 09:26:053213ブラウズ
img 要素は css を使用してスタイルを設定できます。設定方法は、 1. css width などの属性で img のサイズを設定します。 2. CSS の border 属性を使用して、img に枠線を追加します。画像; 3. a タグを設定して画像をリンクとして設定します; 4. text-align 属性を使用して画像の水平方向の配置を設定します。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
推奨: css ビデオ チュートリアル
1. CSS は img 画像のサイズを制御します
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
img{
width:120px;
height:100px;
}
</style>
</head>
<body>
<img src="mytest/div+css/border.jpg"/>
</body>
</html>上記のコード セットimg 画像の長さ。幅はそれぞれ 120px と 100px です。
ただし、cssで画像サイズを大まかに設定すると変形する可能性があるので注意が必要です。
画像を変形させたくない場合は、画像のアスペクト比に注意してください。
2. img 画像に境界線を追加する
実際のアプリケーションでは、画像に境界線効果を追加する場合があります。
これは、CSS の border 属性を使用して実現できます。
コード例は次のとおりです。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
img{
width:220px;
height:100px;
border:2px solid blue;
}
</style>
</head>
<body>
<img src="mytest/div+css/border.jpg"/>
</body>
</html>上記のコードは、幅 2px の青い境界線を img イメージに追加します。
境界線の詳細については、CSS 境界線の章を参照してください。
3. img 画像はリンクとして使用されます
画像はリンクとして使用され、つまり 3499910bf9dac5ae3c52d5ede7383485 内に配置されます。
コード例は次のとおりです:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
img{
width:40px;
height:20px;
border:2px solid blue;
border:none;
}
</style>
</head>
<body>
<a href="#"><img src="mytest/div+css/border.jpg"/></a>>
</body>
</html>上記のコードは、画像をリンク 3499910bf9dac5ae3c52d5ede7383485 に配置し、クリックしてジャンプ アクションを実行します。
画像をリンクに挿入すると、画像に不要な境界線が表示される可能性があることに注意してください。border:none を追加するだけです。
4. 画像の水平方向の配置を設定します
画像の水平方向の中央揃えの設定を例として取り上げます。コード例は次のとおりです:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div{
width:300px;
height:300px;
text-align:center;
background-color:#ccc;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div><img src="mytest/div+css/border.jpg"/></div>
</body>
</html>Use text-align プロパティを使用して、画像の水平方向の配置を設定できます。
この属性は、画像要素自体ではなく、画像のコンテナ要素に設定されることに注意してください。
5. 画像の垂直方向の配置を設定する
以下は、デモンストレーションとしての一般的なコードです。
テキスト ボックスと確認コードは通常、横方向に配置されるため、より美しくなります。
コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div img{
vertical-align:middle
}
input{
height:52px;
}
</style>
</head>
<body>
<div><input type="text"/><img src="mytest/demo/1.jpg"></div>
</body>
</html>上記のコードは、テキスト ボックスと検証コードの垂直方向の配置効果を実現できます。
コア コードは次のとおりです。
div img{
vertical-align:middle
}上記のコードは、ピクチャ要素自体に設定する必要があります。
以上がimg要素にCSSを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。