HTML을 사용하면 웹 페이지에서 이미지를 사용하고 다양한 스타일을 적용하여 이미지를 더 매력적으로 만들 수 있습니다. 이미지의 가로 세로 비율을 변경해야 하거나 이미지가 웹 페이지 레이아웃에 맞지 않는 경우 크기를 조정할 수 있습니다. 이를 위해 ' 너비 ' 그리고 ' 키 ' 속성 ' 이미지 ' 태그. 이러한 속성 값은 CSS 픽셀에서 쉽게 설정할 수 있습니다.

이 매뉴얼에서는 HTML에서 이미지 크기를 조정하는 방법을 배웁니다.

시작하기 전에 이미지 크기 조정 작업을 수행할 HTML 파일에 이미지를 추가해야 합니다.

HTML에 이미지를 포함하는 방법은 무엇입니까?

HTML에 이미지를 추가하려면 다음 구문을 사용하십시오.

위에서 언급한 구문에 대한 설명은 아래에 설명되어 있습니다. ' 이미지 ” 태그는 두 가지 속성을 사용합니다.

• • 'src' 이미지의 경로(URL)를 제공하는 데 사용됩니다.
  • '모든 것' 이미지가 표시되지 않는 경우 대체 텍스트를 제공하는 데 사용됩니다.

HTML

아래 코드는 두 개의 div를 나타냅니다. 첫 번째 div에서 웹 페이지 상단 중앙에 ' HTML의 이미지 크기 '

태그를 사용하여:

< div >
< 센터 >
< h1 > 이미지 크기 안에 HTML h1 >
센터 >
div >

두 번째 div는 '라는 클래스와 함께 추가됩니다. 컨테이너 ”하고 이미지를 중앙에 나타내기 위해

태그를 사용했습니다. 센터 내부에 아래에 언급된 코드를 작성하여 이미지를 추가합니다.

< div 수업 = '컨테이너' >
< 센터 >
< 이미지 src = '이미지/나비.jpg' 모든 것 = '대체 텍스트' >
센터 >
div >

'로 선택한 이미지 640*437 ' 종횡비는 다음과 같습니다.

다음 섹션에서는 이미지 크기를 조정하는 방법을 보여줍니다.

HTML에서 이미지 크기를 조정하는 방법은 무엇입니까?

'를 사용하여 이미지의 크기를 사용자 정의하거나 크기를 조정할 수 있습니다. 너비 ' 그리고 ' 키 ' 속성을 사용하여 너비와 높이를 설정합니다.

이제 추가된 이미지의 너비 값을 ' 300 '하고 작동 방식을 확인하십시오.

< 이미지 src = '이미지/나비.jpg' 모든 것 = '대체 텍스트' 너비 = '300' >

이미지 너비가 변경되고 성공적으로 크기가 조정된 것을 볼 수 있습니다.

너비 외에도 ' 키 ” 속성도 같은 목적으로 활용될 수 있습니다. 크기 차이를 보려면 ' 550 ” 픽셀을 이미지 높이로:

< 이미지 src = '이미지/나비.jpg' 모든 것 = '대체 텍스트' 너비 = '300' 키 = '550' >

이미지 크기의 차이를 명확하게 관찰할 수 있습니다.

이것이 너비와 높이 속성이 이미지의 크기를 조정하는 데 사용되는 방법입니다.

결론

HTML에서 ' 키 ' 그리고 ' 너비 ' 속성은 이미지 크기 조정에 활용됩니다. 이러한 속성의 값을 설정하여 추가된 이미지의 기본 종횡비를 변경할 수 있습니다. 그 결과, 이미지 크기에 대한 명확한 차이를 볼 수 있습니다. 이 블로그는 HTML에서 이미지 크기를 조정하기 위해 height 및 weight 속성을 사용하는 방법을 보여주었습니다.