이미지 크기를 변경하는 방법
- 不言원래의
- 2019-01-09 17:40:33216677검색
이미지 크기를 변경하는 방법: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!