CSS에서 이미지 크기 조정
-
max-width
및max-height
속성을 사용하여 CSS에서 이미지 크기 조정 -
object-fit
속성을 사용하여 CSS에서 이미지 크기 조정 -
너비에
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%;
}
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn