width 속성
width 속성은
img 태그로 지정된
이미지의 너비를 설정합니다.
현재 이 속성은
이미지,
iframe,
video
및 일부 다른 태그에만 사용할 수 있습니다.
픽셀 또는 백분율로 값을 지정할 수 있습니다. 백분율로 크기를 지정하는 경우, 부모 요소의 너비를 기준으로 합니다. 픽셀 단위로 크기를 지정하는 경우, 단위는 표시하지 않습니다.
이미지에 너비와 높이가 모두 설정되지 않은 경우, 이미지는 실제 크기로 표시됩니다. 높이만 설정된 경우, 이미지는 설정된 높이가 되고, 너비는 비율이 왜곡되지 않도록 자동 조정됩니다. 너비만 설정된 경우, 마찬가지로, 이미지가 비율을 유지하며 높이가 자동 조정됩니다. 너비와 높이가 모두 설정된 경우, 이미지의 비율이 왜곡될 수 있습니다 (아닐 수도 있습니다, 추측해 보세요). 너비 또는 높이 (또는 둘 다)가 실제 크기보다 큰 경우, 이미지는 확대되지만 품질이 저하됩니다.
속성으로 이미지의 너비와 높이를 설정하는 것이 좋습니다. 이렇게 하면 브라우저가 이미지를 더 빨리 로드할 수 있습니다. 이미지를 가져온 후 각 이미지의 크기를 계산할 필요가 없기 때문입니다.
불필요한 경우 이미지의 실제 크기를 줄이는 것은 권장하지 않습니다.
예를 들어,
이미지의 실제 크기가 1000 x 1000 픽셀이지만,
너비를 100px로 설정하는 경우.
이 경우 화면의 이미지는
100 픽셀로 보이지만,
전체 천 픽셀의 크기를 가지므로 훨씬 더 오래 로드됩니다.
작동 예제는 다음을 참조하세요:
img 태그.
