HTML <img> height 속성
정의와 사용법
height 속성은 이미지의 높이를 픽셀 단위로 정의합니다.
힌트:항상 이미지에 설정하십시오 height 와 width 속성빈도와 너비를 설정하면 페이지 로드 시 이미지가 필요한 공간을 미리 예약합니다. 그렇지 않으면 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며, 따라서 적절한 공간을 예약할 수 없습니다. 이는 이미지가 로드될 때 페이지 레이아웃이 변경되는 것을 초래합니다 (이미지 로드 시).
힌트:사용 height 와 width 속성이 큰 이미지를 줄이면 사용자가 큰 이미지를 다운로드하게 만듭니다( 페이지에서 보이는 크기와는 무관하게 ). 이러한 상황을 피하기 위해 페이지에 이미지를 사용하기 전에 이미지 처리 소프트웨어를 사용하여 크기를 조정하세요.
延伸阅读：height 및 width 속성 설명
example
600픽셀 높이와 500픽셀 넓이의 이미지:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
syntax
<img height="pixels">
attribute value
| value | description |
|---|---|
| pixels | 이미지의 높이를 픽셀로 지정합니다 (예: height="100"). |
更多实例
이미지 크기 변경 - 채우기 이미지 만들기
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 속성 설명
height 및 width 속성을 사용하는 이유
문서가 로드될 때 내용이 불규칙적으로 움직이는 것을 본 적이 있으신가요? 이렇게 되는 이유는 브라우저가 각 로드된 이미지를 표시하기 위해 페이지 레이아웃을 지속적으로 조정하기 때문입니다. 브라우저는 이미지의 너비와 높이를 다운로드하고 해석하여 이미지 크기를 결정하고, 그런 다음 표시 창에 해당하는 사각형 공간을 남겨둡니다. 그런 다음 브라우저는 이미지를 표시에 삽입하기 위해 페이지 표시 레이아웃을 조정합니다. 이는 또한 이미지가 독립된 파일이며, 원본 파일과는 별도로 각각 로드된다는 것을 알려줍니다.
하지만 이는 문서를 표시하는 가장 효과적인 방법이 아닙니다. 브라우저는 연속적인 및 이후의 문서 내용을 표시하기 전에 각 이미지 파일을 확인하고 스크린 공간을 계산해야 합니다. 이는 문서 표시에 큰 지연을 가져올 수 있으며, 사용자의 읽기를 방해할 수 있습니다.
크리에이터에게는, <img> 태그의 height 및 width 속성을 통해 이미지 크기를 지정하는 것이 더 효과적인 방법입니다. 이렇게 되면 브라우저는 이미지를 다운로드하기 전에 이미지의 위치를 예약하여 문서 표시를 가속화하고 문서 내용의 이동을 방지할 수 있습니다. 이 두 속성은 모두 정수이며, 이미지 크기를 표현하는 데 픽셀을 단위로 사용합니다. 이 두 속성은 <img> 태그에서 나타나는 순서는 중요하지 않습니다.
height 및 width 속성의 문제
虽然 <img> 태그의 height 및 width 속성은 성능을 개선하고 몇 가지 작은 기술을 구현할 수 있게 해줍니다만, 그 사용 시에는 몇 가지 어려운 부정적인 효과도 있습니다. 사용자가 자동 다운로드 이미지 기능을 꺼놓았다고 해도, 브라우저는 이미지를 예약한 공간을 지정된 크기로 표시해야 합니다. 그렇게 되면 독자에게 남겨지는 것은 빈 프레임이며, 그 안에는 의미없는 아이콘이 있어 이 이미지가 배치된 위치임을 나타냅니다. 이 때 페이지는 매우 나쁜 모습을 보이며, 완성되지 않았다는 느낌을 주며, 대부분의 내용이 쓸모없습니다. 지정된 크기를 사용하지 않으면, 브라우저는 텍스트에 이미지 아이콘을 단순히 배치할 뿐입니다. 그래서 최소한의 텍스트를 읽을 수 있습니다.
이 문제에 대한 해결책이 없습니다. 이를 강조할 뿐입니다. 네트워크 성능을 개선할 수 있는 모든 행동을 장려합니다. alt 속성 와설명적인 글이렇게 하면 독자가 최소한 이곳에 무엇이 빠졌는지 알 수 있습니다. 우리는 이러한 크기 속성을 사용하는 것을 권장합니다.因为我们鼓励一切能够改善网络性能的行为。
브라우저 지원
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 지원 | 지원 | 지원 | 지원 | 지원 |
