HTML <img> width 속성
정의와 사용법
width 속성은 이미지의 너비를 픽셀 단위로 정의합니다.
추가로:이미지에 height 와 width 이런属性을 설정하는 것은 좋은 습관입니다. 이러한 속성이 설정되면 페이지가 로드될 때 이미지를 위한 공간을 예약할 수 있습니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없어 적절한 공간을 보존할 수 없습니다. 따라서 이미지가 로드될 때 페이지 레이아웃이 변경됩니다.(이 점에 대해 자세히 설명합니다).
추가로:이런属性을 사용하지 마세요. height 와 width 이미지를 확대하려면 height와 함께 사용해야 합니다. width 이미지를 축소하려면 사용자는 대용량의 이미지를 다운로드해야 합니다(물론 이미지가 페이지에서 작게 보일 수 있습니다). 올바른 방법은 이미지를 웹 페이지에서 사용하기 전에 소프트웨어를 통해 적절한 크기로 처리하는 것입니다.
예제
600픽셀 높이, 500픽셀 넓이의 이미지:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
문법
<img width="pixels">
속성 값
| 값 | 설명 |
|---|---|
| pixels | 이미지의 넓이를 픽셀 단위로 지정합니다 (예: width="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" />
문서 창의 크기가 변경될 때, 이 이미지의 크기도 그에 따라 변경됩니다:
추가로:percentages형식의 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 속성 그리고설명적인 글이렇게 하면 독자가 여기서 부족한 것이 무엇인지 최소한 알 수 있습니다. 우리는 이러한 크기 속성을 사용하는 것을 권장합니다.因为我们鼓励一切能够改善网络性能的行为。
브라우저 지원
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 지원 | 지원 | 지원 | 지원 | 지원 |
