ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLタグ:imgタグの使い方まとめ

HTMLタグ:imgタグの使い方まとめ

不言
リリース: 2018-08-08 09:38:33
オリジナル
4556 人が閲覧しました

この記事の内容は HTML タグに関するものです。img タグの使用法をまとめています。必要な方は参考にしていただければ幸いです。

1. Img タグには 2 つの重要な属性があります:

1.src 属性: 画像のアドレス

2.alt 属性: 画像には実際のテキストは表示されません

2. Img タグは行レベルの要素 :

img と input はインライン置換要素です。高さ/幅/パディング/マージンはすべて利用可能です。効果はブロック要素と同等です。インライン非置換要素、たとえば、高さ/幅/パディング上、下/マージン上/下は、幅の変更に使用できるのはパディング左/右とマージン左/右のみです。

3. Img タグを中央に配置します:

1. 最初の方法: この方法はあまり好きではありません。Img タグを table-cell に設定することはできません。エラーが発生しやすい。

img_p{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      }
ログイン後にコピー

2. 2 番目の方法: この方法では、Img タグに margin 属性を持たないことが最善です。そうしないと中央に配置されません。

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}
ログイン後にコピー

4. Imgタグイベント:

1. HTML DOM Eventオブジェクトのonerrorイベントを使用して、例外を表示する画像を処理します。

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">
ログイン後にコピー

おすすめ関連記事:

htmlレイアウト: HTML 3カラムレイアウトの実装コード

innerHTML 属性とは何ですか? innerHTML 属性の使用法

以上がHTMLタグ:imgタグの使い方まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート