HTML <img> 태그의 height와 width 속성
정의와 사용법
<img> 태그의 height와 width 속성이 이미지의 크기를 설정합니다.
푸터봉:이미지에 height와 width 속성을 지정하는 것은 좋은 습관입니다. 이 두 속성을 설정하면 페이지 로드 시 이미지에 공간을 예약할 수 있습니다. 이 두 속성이 없으면 브라우저는 이미지 크기를 알 수 없으며, 따라서 이미지가 로드될 때 페이지 레이아웃이 변경될 수 있습니다。（이 점에 대해 자세히 설명합니다）.
푸터봉:이미지를 height와 width 속성을 통해 확대하지 마세요. height와 width 속성을 통해 이미지를 축소하면, 사용자는 큰 용량의 이미지를 다운로드해야 합니다（즉사용자가 페이지에서 보이는 이미지와는 상관없이）. 올바른 방법은 이미지를 웹 페이지에 사용하기 전에 소프트웨어를 통해 적절한 크기로 처리하는 것입니다.
延伸阅读：height와 width 속성의 설명
更多实例
이미지 크기를 변경 - 채우기 이미지 만들기
height와 width 속성은 사람들이 실제 이미지 크기를 지정하지 않아도 되는 숨겨진 특성을 가지고 있습니다. 즉, 이 두 값은 실제 크기보다 크거나 작을 수 있습니다. 브라우저는 자동으로 이미지를 조정하여 예약된 공간 크기에 맞게 조정합니다. 이 방법을 사용하면 큰 이미지의 축소판을 쉽게 만들고, 매우 작은 이미지를 확대할 수 있습니다. 하지만 유의해야 할 것은, 브라우저는 최종적으로 표시되는 크기와 관계없이 전체 파일을 다운로드해야 하며, 원래의 너비와 높이 비율을 유지하지 않으면 이미지가 변형될 수 있습니다.
height와 width 속성의 또 다른 기술은 페이지 영역을 쉽게 채우고, 문서 성능을 개선할 수 있습니다. 예를 들어, 문서에 컬러 가로 줄을 넣고 싶다면, 전체 크기를 가진 이미지를 만들 필요가 없습니다. 대신, 너비와 높이 모두 1 개 픽셀의 이미지를 만들고, 사용하고 싶은 색상을 할당한 후, height와 width 속성을 사용하여 더 큰 크기로 확장할 수 있습니다.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
위의 이 HTML 코드의 효과는 이렇습니다. 이 컬러 바는 단 하나의 픽셀만을 사용한 이미지로 만들어졌습니다:
퍼센트 값을 사용하면 됩니다
width 속성의 마지막 기술은 퍼센트 값을 픽셀의 절대 값 대신 사용하는 것입니다. 이는 브라우저가 이미지를 브라우저 디스플레이 창의 일정 비율로 확대하도록 합니다. 따라서, 디스플레이 창 너비와 같은 너비, 30 개 픽셀 높이의 컬러 가로 줄을 만들기 위해 이렇게 할 수 있습니다:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
문서 창의 크기가 변경될 때, 이 이미지의 크기도 그에 따라 변경됩니다:
푸터봉:如果一个百分比形式的 width 값이 제공되고 height를 무시하면, 확대하든 축소하든 브라우저는 이미지의 너비와 높이 비율을 유지합니다. 이는 이미지의 높이와 너비 비율이 변하지 않고, 이미지가 변형되지 않음을 의미합니다.
아래의 HTML을 보세요:
<img src="/i/ct_1px.gif" width="20%" />
즉, 이미지 ct_1px.gif의 width 속성의 퍼센트 값을 설정하면 사각형 이미지를 얻게 됩니다.(이는 원본 ct_1px.gif가 1px 너비와 높이의 사각형이기 때문입니다):
푸터봉:당신은 우리의 온라인 테스트 도구에서직접 시도해 보세요!
푸터봉:위의 예제를 제공하는 이유는 height와 width 속성의 사용법을 더 잘 이해하도록 돕기 위해입니다. 만약 페이지를 장식하는 대규모의 단색 블록이 필요하다면, 더 나은 방법은배경색을 CSS로 생성하다。
브라우저 지원
모든 브라우저가 height와 width 속성을 지원합니다.
문법
<img height="value" />
또는:
<img width="value" />
속성 값
| 값 | 설명 |
|---|---|
| pixels | 픽셀로 계산된 높이나 너비 값. |
| percent | 요소의 퍼센트로 계산된 높이나 너비 값. |
TIY 예제
- 이미지 크기 조정
- 이 예제에서는 이미지를 다른 크기로 조정하는 방법을 보여줍니다.
height와 width 속성의 설명
height와 width 속성을 사용하는 이유는 무엇인가요?
문서가 로드될 때 내용이 규칙적으로 움직이는 것을 본 적이 있나요? 이렇게 되는 이유는 브라우저가 각 로드된 이미지를 표시하기 위해 페이지 레이아웃을 지속적으로 조정하기 때문입니다. 브라우저는 이미지의 너비와 높이를 다운로드하고 분석하여 이미지 크기를 결정하고, 그런 다음 표시 창에서 해당 사각형 공간을 남겨둡니다. 그런 다음 브라우저는 이미지를 표시에 삽입하기 위해 페이지 표시 레이아웃을 조정합니다. 이는 또한 이미지가 독립된 파일이며, 원본 파일과는 별도로 별도로 로드된다는 것을 알려줍니다.
하지만 이는 문서를 효과적으로 표시하는 가장 효율적인 방법이 아닙니다. 왜냐하면 브라우저가 연속적인 이후의 문서 내용을 표시하기 전에 각 이미지 파일을 확인하고 스크린 공간을 계산해야 하기 때문입니다. 이는 문서 표시에 큰 지연을 초래하여 사용자의 읽기가 방해받을 수 있습니다.
创作者에게 더 효율적인 방법은 <img> 태그의 height와 width 속성을 통해 이미지의 크기를 지정하는 것입니다. 이렇게 하면 브라우저가 이미지를 다운로드하기 전에 위치를 사전에 예약하여 문서 표시를 가속화하고 문서 내용의 이동을 방지할 수 있습니다. 이 두 속성은 모두 정수이며 이미지 크기를 표현하는 데 픽셀을 사용해야 합니다. 이 두 속성이 <img> 태그에서 나타나는 순서는 중요하지 않습니다.
height와 width 속성의 문제
尽管 <img> 태그의 height와 width 속성이 성능을 개선하고 몇 가지 작은 기술을 구현할 수 있지만, 이를 사용할 때는 몇 가지 복잡한 부정적인 효과도 있습니다. 사용자가 이미 이미지 다운로드 자동 기능을 껐다고 해도, 브라우저는 이미지를 지정된 크기로 표시할 공간을 만들어야 합니다. 그래서 독자에게 남겨진 것은 일반적으로 비어 있는 프레임이며, 그 안에는 의미가 없는 아이콘이 있어 이가 이미지가 놓여진 위치임을 나타냅니다. 이렇게 되면 페이지는 완성되지 않았다는 것처럼 보이고, 대부분의 내용이 쓸모없게 됩니다. 지정된 크기를 사용하지 않으면, 브라우저는 텍스트 안에 이미지 아이콘을 단순히 배치할 뿐입니다. 그래서 최소한의 글을 읽을 수 있습니다.
이 문제에 대한 해결책이 없기 때문에, 우리는 이를 강조할 수밖에 없습니다. 그것은 alt 속성과설명적인 글이렇게 하면 독자가 누락된 것이 무엇인지 최소한 알 수 있습니다. 그러나 우리는 이러한 크기 속성을 사용하는 것을 권장합니다.因为我们鼓励一切能够改善网络性能的行为。
