"와 같은 코드의 너비와 높이를 변경합니다. CSS 스타일 사용 너비 및 높이 속성을 제어합니다."/> "와 같은 코드의 너비와 높이를 변경합니다. CSS 스타일 사용 너비 및 높이 속성을 제어합니다.">

 >  기사  >  웹 프론트엔드  >  이미지 크기를 변경하는 방법

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

不言
不言원래의
2019-01-09 17:40:33216815검색

이미지 크기를 변경하는 방법: 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가 됩니다

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

위 내용은 이미지 크기를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.