방법: 1. img 태그의 너비 및 높이 속성을 사용합니다("
" 구문). 2. 너비 및 높이 속성을 사용합니다. CSS의 높이 속성에서 구문은 "img{width: value; height: value}"입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
방법 1: img 태그의 너비 및 높이 속성 사용
태그의 높이 및 너비 속성은 이미지의 크기를 설정합니다.
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="HTML에서 이미지 크기를 설정하는 방법" >
높이 및 너비 속성을 사용하는 이유
문서가 로드될 때 내용이 불규칙하게 움직이는 것을 본 적이 있습니까? 이는 로드된 각 이미지를 표시할 수 있도록 브라우저가 페이지를 지속적으로 다시 레이아웃하기 때문에 발생합니다. 브라우저는 이미지의 너비와 높이를 다운로드하고 구문 분석하여 이미지의 크기를 결정한 다음 표시 창에 해당 직사각형 공간을 남겨 둡니다. 그런 다음 브라우저는 페이지의 디스플레이 레이아웃을 조정하여 이미지를 디스플레이에 삽입합니다. 이는 또한 이미지가 독립 파일이고 소스 파일과 독립적으로 로드된다는 것을 알려줍니다.
그러나 이것은 문서를 표시하는 가장 효율적인 방법은 아닙니다. 왜냐하면 브라우저는 인접한 문서 콘텐츠와 후속 문서 콘텐츠를 표시하기 전에 각 이미지 파일을 확인하고 화면 공간을 계산해야 하기 때문입니다. 이로 인해 문서 표시가 매우 크게 지연되어 사용자가 읽는 데 방해가 될 수 있습니다.
제작자를 위한 보다 효율적인 방법은 태그의 높이 및 너비 속성을 통해 이미지 크기를 지정하는 것입니다. 이 경우 브라우저는 이미지를 다운로드하기 전에 이미지 위치를 예약하여 문서 표시 속도를 높이고 문서 내용이 이동하는 것을 방지합니다. 두 속성 모두 정수 값이어야 하며 이미지 크기를 픽셀 단위로 나타내야 합니다. 이 두 속성이
태그에 나타나는 순서는 중요하지 않습니다.
높이 및 너비 속성 문제
태그의 높이 및 너비 속성을 사용하면 성능을 향상하고 몇 가지 트릭을 구현할 수 있지만 이를 사용할 때 몇 가지 까다로운 부작용이 있습니다. 사용자가 이미지 자동 다운로드 기능을 해제한 경우에도 브라우저는 이미지용으로 예약된 공간을 지정된 크기로 표시해야 합니다. 이것이 독자에게 남기는 것은 일반적으로 여기에 이미지가 배치되어야 함을 나타내는 의미 없는 아이콘이 있는 빈 프레임입니다. 이 시점에서는 페이지가 전혀 완성되지 않은 것처럼 매우 좋지 않으며 대부분의 콘텐츠가 쓸모 없게 됩니다. 지정된 크기를 사용하지 않으면 브라우저는 디스플레이에서 최소한 일부 텍스트를 읽을 수 있도록 텍스트에 이미지 아이콘을 배치합니다.
추천 튜토리얼: "html 비디오 튜토리얼"
방법 2: CSS의 너비 및 높이 속성 사용
너비 속성은 요소의 너비를 설정하고, 높이 속성은 요소의 높이를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
width:200px ;
height: 200px;
}
</style>
</head>
<body>
<img src="img/1.jpg"/ alt="HTML에서 이미지 크기를 설정하는 방법" >
</body>
</html>더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 HTML에서 이미지 크기를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
