HTML에서 이미지 크기를 설정하는 방법

HTML은 웹페이지를 만드는 데 사용되는 마크업 언어로, 웹페이지에 텍스트, 이미지, 오디오, 비디오 등 다양한 요소와 콘텐츠를 추가할 수 있습니다. 그 중 이미지는 웹 페이지의 공통 요소이지만 웹 콘텐츠 레이아웃에 더 적합하도록 이미지 크기를 제어해야 하는 경우도 있습니다. 이번 글에서는 HTML을 사용하여 이미지 크기를 설정하는 방법을 살펴보겠습니다.

HTML의 이미지 태그

HTML에서는 img 요소를 사용하여 웹 페이지에 이미지를 추가합니다. img 요소에는 이미지 파일의 URL 주소를 지정하는 데 사용되는 src 속성이 있습니다. 예를 들어 "example.jpg"라는 이미지를 웹 페이지에 추가하려면 다음 코드를 사용할 수 있습니다.

<img src="example.jpg">

이런 식으로 브라우저는 웹 페이지에 이미지를 표시합니다. 그러나 이 이미지는 예상한 크기와 다를 수 있으므로 다른 속성을 사용하여 이미지 표시 크기를 제어해야 합니다.

이미지 크기 설정

HTML은 이미지의 표시 크기를 설정하는 두 가지 주요 속성인 너비와 높이를 제공합니다. 이 두 속성은 이미지의 너비와 높이를 각각 픽셀 단위로 설정하는 데 사용됩니다. 예를 들어 이미지 너비를 200픽셀로 설정하려면 다음 코드를 사용할 수 있습니다.

<img src="example.jpg" width="200">

마찬가지로 이미지 높이를 150픽셀로 설정하려면 다음 코드를 사용할 수 있습니다.

<img src="example.jpg" height="150">

이런 식으로 를 사용하면 이미지가 지정된 너비와 높이를 따라 표시됩니다. 속성 중 하나만 설정된 경우 브라우저는 다른 속성의 값에 맞게 비례적으로 이미지 크기를 자동으로 조정합니다. 예를 들어 너비 속성만 설정된 경우 브라우저는 원본 이미지의 너비 대 높이 비율을 기반으로 해당 높이 값을 자동으로 계산합니다.

너비와 높이를 동시에 설정하세요

너비와 높이를 별도로 설정하는 것 외에도 이 두 속성을 동시에 설정할 수도 있습니다. 이 경우 이미지는 두 속성에 지정된 크기에 맞게 늘어나거나 압축됩니다. 예를 들어 다음 코드는 이미지의 너비를 200픽셀로, 높이를 150픽셀로 설정합니다.

<img src="example.jpg" width="200" height="150">

이렇게 하면 이미지의 크기가 200픽셀 × 150픽셀로 설정됩니다. 너비와 높이를 동시에 설정하면 이미지가 변형되어 이미지 표시 효과에 영향을 미칠 수 있다는 점에 유의해야 합니다.

CSS를 사용하여 이미지 크기 제어

HTML 속성을 사용하여 이미지 크기를 설정하는 것 외에도 CSS를 사용하여 이미지의 표시 효과를 제어할 수도 있습니다. 특히 CSS의 너비 및 높이 속성을 사용하여 이미지 크기를 설정할 수 있습니다. 예:

<img src="example.jpg" style="width:200px;height:150px;">

마찬가지로 외부 스타일 시트에서 CSS 스타일을 정의할 수도 있습니다. 예:

<img src="example.jpg" class="thumbnail">

<style>
.thumbnail {
    width:200px;
    height:150px;
}
</style>

이런 방식으로 , "thumbnail" 클래스가 있는 이미지 요소를 사이트 전체에서 사용할 수 있으며 해당 크기는 200픽셀 x 150픽셀로 설정됩니다.

결론

HTML에서 이미지 크기를 설정하면 웹 페이지의 이미지 표시를 더 효과적으로 제어하는 ​​데 도움이 될 수 있습니다. width 및 height 속성을 사용하여 이미지의 너비와 높이를 각각 설정하거나 이 두 속성을 동시에 설정하여 이미지의 표시 비율을 변경할 수 있습니다. 또한 CSS를 사용하여 이미지 크기를 정밀하게 제어하여 웹페이지를 더욱 매력적이고 읽기 쉽게 만들 수도 있습니다.

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