CSS에서 이미지 크기 조정

1. max-width 및 max-height 속성을 사용하여 CSS에서 이미지 크기 조정
2. object-fit 속성을 사용하여 CSS에서 이미지 크기 조정
3. 너비에 auto 값과 max-height 속성을 사용하여 CSS에서 이미지 크기 조정

이 기사에서는 높이와 너비를 유지하면서 div에 비례적으로 맞도록 CSS의 이미지 크기를 조정하는 방법을 소개합니다.

max-width 및 max-height 속성을 사용하여 CSS에서 이미지 크기 조정

HTML에 이미지를 삽입할 때마다 이미지는 해당 크기의 총 픽셀을 차지합니다. 이미지가 특정 컨테이너 안에 있는 경우 이미지 크기가 컨테이너 크기보다 클 수 있습니다. 이미지는 화면에서 더 많은 공간을 차지합니다. 다른 요소에서 영역을 가져옵니다. 결과적으로 웹 페이지는 우리의 디자인을 따르지 않고 매력적이지 않을 것입니다. 이 문제를 없애기 위해 max-width 및 max-height CSS 속성을 사용하여 컨테이너 크기에 따라 이미지 크기를 자동으로 조정할 수 있습니다. 이러한 속성은 요소의 최대 높이와 ​​너비를 설정합니다. 요소의 콘텐츠가 max-width 및 max-height 속성보다 너비와 높이가 더 큰 경우 해당 크기는 이러한 속성 값으로 조정됩니다. 그러나 크기가 작으면 효과가 발생하지 않습니다. max-height 및 max-width 속성을 요소로 설정할 수 있으므로 컨테이너 내부의 요소가 크기를 조정합니다.

예를 들어 HTML에서 cat 클래스가 있는 div를 만듭니다. div 안에 <img> 태그를 사용하여 이미지를 삽입합니다. CSS에서 img 태그를 선택하고 max-width 및 max-height 속성을 100%에 할당합니다. 그런 다음 cat 클래스를 선택하고 200px와 200px의 height와 width를 지정합니다.

아래 예에서는 width와 height의 300px가 있는 LoremFlickr에서 임의의 이미지를 삽입했습니다. 그러나 cat 컨테이너의 높이와 너비는 200px입니다. max-height 및 max-width 속성을 사용하면 더 큰 이미지가 컨테이너 크기로 축소됩니다. 따라서 이미지 크기를 자동으로 조정했습니다.

예제 코드:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

object-fit 속성을 사용하여 CSS에서 이미지 크기 조정

CSS의 object-fit 속성을 사용하여 컨테이너에 맞게 이미지 크기를 조정할 수 있습니다. 컨테이너는 이미지보다 크거나 작을 수 있습니다. 이 속성을 사용하면 컨테이너의 크기에 따라 이미지 또는 비디오를 맞출 수 있습니다. object-fit 속성을 사용하여 이미지가 맞는 방식을 지정할 수 있습니다. 속성은 fill, contain, cover, none 및 scale-down과 같은 값을 사용합니다. 더 큰 이미지가 컨테이너의 주어진 치수로 축소될 수 있도록 contain 값을 사용할 수 있습니다.

예를 들어 첫 번째 예와 같이 img 태그를 사용하여 600px 높이와 너비의 이미지를 삽입합니다. CSS에서 태그를 선택하고 높이와 너비를 100%로 설정합니다. object-fit 옵션에서 contain 값을 사용하십시오. 그런 다음 cat 클래스를 선택하고 컨테이너에 300px의 높이와 너비를 지정합니다.

여기에 컨테이너의 크기보다 더 큰 차원의 이미지를 삽입했습니다. 이미지는 600px이고 컨테이너는 300px입니다. object-fit 속성을 사용하여 이미지를 컨테이너 크기로 축소할 수 있습니다. 따라서 이미지 크기를 자동으로 조정할 수 있습니다.

예제 코드:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

너비에 auto 값과 max-height 속성을 사용하여 CSS에서 이미지 크기 조정

auto 값을 너비로 사용하고 max-height 속성을 설정하여 컨테이너에 맞도록 이미지 너비를 지정할 수 있습니다. 이미지의 높이를 컨테이너의 높이로 줄입니다. 예를 들어 HTML에 위와 같이 이미지를 삽입하고 CSS에서 컨테이너의 높이를 200px로 설정합니다. 다음으로 img 태그를 선택하고 너비를 auto로 설정하고 max-height 속성을 100%로 설정합니다.

아래 예에서 이미지는 처음에 높이와 너비가 400px입니다. 컨테이너의 높이를 200px로 설정했습니다. max-height 속성을 100%로 설정하면 이미지가 200px로 축소됩니다. 따라서 컨테이너의 높이에 따라 이미지의 높이를 조정했습니다.

예제 코드:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}