简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

img要素にCSSを使用できますか?

藏色散人
リリース： 2022-12-30 11:11:28
オリジナル
3211 人が閲覧しました

img 要素は css を使用してスタイルを設定できます。設定方法は、 1. css width などの属性で img のサイズを設定します。 2. CSS の border 属性を使用して、img に枠線を追加します。画像; 3. a タグを設定して画像をリンクとして設定します; 4. text-align 属性を使用して画像の水平方向の配置を設定します。

img要素にCSSを使用できますか?

このチュートリアルの動作環境: 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 画像はリンクとして使用されます

画像はリンクとして使用され、つまり 内に配置されます。

コード例は次のとおりです: 

<!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>
ログイン後にコピー

上記のコードは、画像をリンク に配置し、クリックしてジャンプ アクションを実行します。

画像をリンクに挿入すると、画像に不要な境界線が表示される可能性があることに注意してください。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 サイトの他の関連記事を参照してください。

関連ラベル：
css img
ソース：php.cn
前の記事：cssクラスってどういう意味ですか？ 次の記事：CSSで中国語フォントを設定できない場合の対処方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
アンカーポイント内の画像に対して境界線の半径が機能しない 次の HTML コードを使用しています: <aclass="-video-detail-qualifiers-branding"><imgsr...
から 2024-04-06 17:20:25
0
1
347
for ループはランダムに 1 から 0 まで変化します 基本的に、ページが更新されるたびに、for ループは 1 から 0 に変化する可能性があります。なぜこのようなことが起こるのかはわかりませんが、画像を重ね合わせる方法に影響します。...
から 2024-04-06 16:48:14
0
1
393
モバイル サイズの画面で段落を左側に移動するための CSS および HTML メソッド 通常の 16:9 のコンピュータ画面では、左側にテキスト、右側に画像が表示され、完璧に見えます。ただし、小さい画面 (携帯電話サイズの画面など) では、希望どおりに段落の上に画像が...
から 2024-04-04 20:25:22
0
1
330
React コンポーネント内の関数からの予期しない出力 2 つの画像 (IMG と IMG2) をインポートしました。 IMG は、ビューポートの幅が 600 ピクセル未満の場合に表示し、ビューポートの幅が 600 ピクセル以上の場合に...
から 2024-04-03 00:17:44
0
1
285
HTMLでconnect-srcコンテンツセキュリティポリシーのワイルドカードを設定するにはどうすればよいですか? HTML には、次のようになります <metahttp-equiv="Content-Security-Policy"content="defa...
から 2024-04-02 16:12:49
0
1
414
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！