HTML에서 이미지 크기를 변경하는 방법

html에서 이미지 크기를 변경하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img를 통해 이미지를 만들고 마지막으로 높이 및 너비 속성을 통해 이미지 크기를 설정합니다.

이 기사의 운영 환경: windows7 시스템, HTML5 버전, DELL G3 컴퓨터

html에서 이미지 크기를 변경하는 방법은 무엇입니까?

태그의 높이 및 너비 속성은 이미지의 크기를 설정합니다.

팁: 이미지의 높이 및 너비 속성을 지정하는 것이 좋습니다. 이러한 속성이 설정되면 페이지가 로드될 때 이미지를 위한 공간이 예약될 수 있습니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 이해하고 이미지에 적합한 공간을 확보할 수 없으므로 이미지가 로드될 때 페이지 레이아웃이 변경됩니다. (이 아이디어는 아래에서 자세히 설명됩니다.)

팁: 높이 및 너비 속성을 통해 이미지 크기를 조정하지 마세요. 높이 및 너비 속성을 통해 이미지가 축소되면 사용자는 더 큰 이미지를 다운로드해야 합니다(페이지에서 이미지가 작게 보이는 경우에도). 올바른 접근 방식은 웹 페이지에서 이미지를 사용하기 전에 소프트웨어를 통해 이미지를 적절한 크기로 처리하는 것입니다.

이미지 크기 변경 - 채워진 이미지 만들기

높이 및 너비 속성에는 이미지의 실제 크기를 지정할 필요가 없는 숨겨진 속성이 있습니다. 즉, 이 두 값은 더 크거나 더 클 수 있습니다. 실제 크기보다 작습니다. 브라우저는 예약된 공간에 맞게 이미지 크기를 자동으로 조정합니다. 이 방법을 사용하면 큰 이미지의 축소판을 쉽게 만들 수 있을 뿐만 아니라 매우 작은 이미지를 확대할 수도 있습니다. 하지만 주의하세요. 최종 표시 크기에 관계없이 브라우저는 여전히 전체 파일을 다운로드해야 하며, 원래 너비와 높이 비율이 유지되지 않으면 이미지가 왜곡됩니다.

높이 및 너비 속성을 사용하는 또 다른 기술은 페이지 영역을 매우 쉽게 채우는 동시에 문서의 성능도 향상시키는 것입니다. 문서에 컬러 가로 막대를 배치하고 싶다고 상상해 보세요. 전체 크기 이미지를 만들 필요는 없습니다. 대신 너비 1픽셀, 높이 1픽셀의 이미지를 만들고 사용하려는 색상을 지정합니다. 그런 다음 높이 및 너비 속성을 사용하여 더 큰 크기로 확장합니다.

<img  src="/static/imghwm/default1.png"  data-src="/i/ct_1px.gif"  class="lazy"      style="max-width:90%" height="30px" / alt="HTML에서 이미지 크기를 변경하는 방법" >

위 HTML의 효과는 다음과 같습니다. 이 색상 막대는 픽셀이 1개인 이미지로 만들어집니다.

위 내용은 HTML에서 이미지 크기를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!