HTMLで画像を表示する方法

青灯夜游
リリース: 2021-10-11 15:52:17
オリジナル
32534 人が閲覧しました

HTML で画像を表示する方法: 1. img タグを "HTMLで画像を表示する方法"; という構文で使用します。 2. "background-image:url(画像ファイル) ) を指定された要素に変換します。 Address);" スタイル。

HTMLで画像を表示する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

html画像を表示する方法

方法 1: img タグを使用して画像を挿入する

HTML では、img 要素を使用して画像を Web ページに埋め込むことができます。

技術的には、HTMLで画像を表示する方法 タグは Web ページに画像を挿入するのではなく、Web ページから画像にリンクすることに注意してください。 HTMLで画像を表示する方法 タグは、参照された画像のプレースホルダーを作成します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="HTMLで画像を表示する方法" >
	</body>
</html>
ログイン後にコピー

HTMLで画像を表示する方法

方法 2: CSS の背景画像属性を使用する

「background-image:url(画像ファイルのアドレス)」を追加するだけです;" スタイル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 500px;
				height: 300px;
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
ログイン後にコピー

エフェクト画像:

HTMLで画像を表示する方法

# 推奨チュートリアル: "

html ビデオ チュートリアル

以上がHTMLで画像を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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