HTML에서 이미지 크기 조정

1. HTML의 브라우저 뷰포트 내에서 큰 크기의 이미지 크기 조정
2. width 및 min-width 속성을 사용하여 HTML에서 이미지 크기 조정

이 튜토리얼에서는 HTML에서 큰 이미지의 크기를 조정하는 방법을 설명합니다.

HTML의 브라우저 뷰포트 내에서 큰 크기의 이미지 크기 조정

이미지의 width 및 height 속성을 사용하여 HTML에서 큰 이미지의 크기를 조정할 수 있습니다. 큰 크기의 이미지는 화면 가장자리에서 벗어납니다. 이미지를 뷰포트 크기로 조정하려면 컨테이너를 사용하고 height 및 width 속성을 뷰포트의 높이와 너비로 설정할 수 있습니다. vh 및 vw 단위를 사용하여 크기를 설정할 수 있습니다. vh 및 vw의 한 단위는 뷰포트 높이 및 너비의 1%에 해당합니다. 100%로 설정을 사용하여 이미지의 높이와 너비를 설정할 수 있습니다. 이미지는 컨테이너 내부에 삽입되어야 합니다. 그런 다음 큰 크기의 이미지가 뷰포트에 맞습니다.

예를 들어, container 클래스를 사용하여 HTML에서 div를 만듭니다. div 안에 img 태그를 작성하고 큰 이미지를 삽입합니다. CSS에서 container 클래스를 선택하고 height와 width를 100vh 및 100vw로 설정합니다. 다음으로 img 태그를 선택하고 height와 width를 100%로 설정합니다.

아래 예에서는 vh, vw 및 %와 같은 단위를 사용하여 뷰포트에 맞게 큰 이미지의 크기를 조정합니다.

예제 코드:

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

width 및 min-width 속성을 사용하여 HTML에서 이미지 크기 조정

width 및 min-width 속성을 사용하여 HTML에서 이미지의 크기를 조정할 수 있습니다. <img> 태그의 스타일을 지정하는 동안 이러한 속성을 사용할 수 있습니다. width 속성은 요소의 너비를 지정합니다. min-width 속성은 요소의 최소 너비를 지정합니다. 콘텐츠가 최소 너비보다 작은 경우에만 적용됩니다. 그렇지 않으면 이 속성은 효과가 없습니다. 또한 이 속성은 너비 속성 값이 최소 너비보다 작은 것을 방지합니다. 이 방법에서는 width와 min-width를 픽셀 단위로 표시합니다.

예를 들어, HTML 본문 내부에 <img> 태그를 작성합니다. <img> 태그 내에서 src 속성으로 이미지 경로를 지정합니다. 그런 다음 style 속성에 25vw의 width와 140px의 min-width를 지정합니다. 그런 다음 <img> 태그를 닫고 이전에 열린 모든 태그를 닫습니다.

width 및 min-width 속성을 사용하여 이미지 크기를 조정했습니다. 뷰포트에 맞지 않는 큰 이미지는 뷰포트에 들어갈 수 있습니다. 아래 예에서 25vw 너비는 너비가 뷰포트 너비의 25%에 해당함을 보여줍니다. 이런 식으로 HTML의 style 태그를 사용하여 이미지의 크기를 조정할 수 있습니다.

예제 코드:

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />