이미지 크기를 변경하는 방법-HTML 튜토리얼-php.cn

이미지 크기를 변경하는 방법

不言

풀어 주다： 2021-04-15 15:26:43

원래의

216807명이 탐색했습니다.

이미지 크기를 변경하는 방법: 1. HTML 태그에서 "img src="..." width="..." height="...">"와 같은 코드의 너비와 높이를 변경합니다. 2. CSS 스타일을 사용하여 너비와 높이 속성을 제어합니다.

이미지 크기를 변경하는 방법

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3.

웹 페이지를 디자인할 때 가끔 이미지의 크기가 일치하지 않을 수 있습니다. 그러면 코드에서 이미지 크기를 어떻게 변경할 수 있나요? 이 기사에서는 사진 크기를 변경하는 방법을 소개합니다.

이미지 크기를 변경하는 방법에는 두 가지가 있습니다. 하나는 HTML 태그 내에서 너비와 높이를 변경하는 것이고, 다른 하나는 CSS 스타일을 사용하여 너비와 높이 속성을 제어하는 것입니다.

먼저 HTML 태그 내에서 이미지 너비와 높이 변경

이미지 img 태그에서 직접 너비와 높이 속성을 사용하여 이미지 너비와 높이를 제어하는 방법을 살펴보겠습니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<img  src="img/tupian.jpg"    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="img/tupian.jpg"  alt="이미지 크기를 변경하는 방법" >
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다. 이미지도 150x150px가 됩니다

이미지 크기를 변경하는 방법