」などのコードで幅と高さを変更します。 CSS スタイルを使用する 幅と高さのプロパティを制御します。"/> 」などのコードで幅と高さを変更します。 CSS スタイルを使用する 幅と高さのプロパティを制御します。">
検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >画像サイズを変更する方法

画像サイズを変更する方法

不言
不言オリジナル
2019-01-09 17:40:33217052ブラウズ

画像サイズを変更する方法: 1. HTML タグ内で「img src="..." width="..." height="...」などのコードで幅と高さを変更します。 "> "; 2. CSS スタイルを使用して幅と高さの属性を制御します。

画像サイズを変更する方法

#この記事の動作環境: Windows7 システム、Dell G3 コンピューター、HTML5&&CSS3。

Web ページをデザインするときに、画像のサイズが一致しないことがあります。では、コード内で画像のサイズを変更するにはどうすればよいでしょうか。この記事では写真のサイズを変更する方法を紹介します。

画像のサイズを変更するには 2 つの方法があります。

1 つは HTML タグ内で幅と高さを変更する方法で、もう 1 つは CSS スタイルを使用して幅と高さの属性を制御する方法です。

まず

HTML タグでの画像の幅と高さの変更を見てみましょう

画像内で幅を直接使用するimg タグと height 属性で画像の幅と高さを制御できます。

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="img/tupian.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="画像サイズを変更する方法" >
</body>
</html>

効果は次のとおりです (元の画像は 1072x768px):

画像サイズを変更する方法

幅を設定できます画像タグで直接高さと高さを指定すると、直感的にわかるでしょう。

それでは見てみましょう

CSS スタイルを使用して幅と高さの属性を制御します

同じ画像を使用します。コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		img{
			width: 150px;
			height: 150px;
		}
	</style>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="img/tupian.jpg"  class="lazy"    alt="画像サイズを変更する方法" >
</body>
</html>

効果は以下の通りです: 画像も 150x150px

画像サイズを変更する方法 になりました

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLでコメントする方法次の記事：HTMLでコメントする方法

関連記事

続きを見る