HTML에서 이미지 자르기

1. width, height 및 overflow CSS 속성을 사용하여 HTML에서 이미지 자르기
2. object-fit CSS 속성을 사용하여 HTML에서 이미지 자르기

이 기사에서는 HTML에서 이미지를 자르는 방법을 소개합니다.

width, height 및 overflow CSS 속성을 사용하여 HTML에서 이미지 자르기

width 및 height와 함께 CSS 컨테이너에는 이미지 자르기에 사용할 수 있는 overflow 속성도 있습니다. overflow 속성을 활성화하려면 특정 너비와 높이의 div 안에 이미지를 넣고 overflow를 hidden으로 설정해야 합니다. 기본 컨테이너가 구조를 유지하고 이미지 오버플로가 컨테이너 뒤에 숨겨지도록 합니다. 마지막으로 margin 속성을 사용하여 잘린 영역을 조정할 수 있습니다. 이 속성은 4개의 값을 취합니다. 그러나 4개의 값 중 첫 번째 값과 마지막 값만 각각 위쪽과 왼쪽에서 픽셀을 나타내므로 필수입니다.

예를 들어 URL이 https://tinyurl.com/k764en3w인 이미지를 두 개의 다른 컨테이너에 삽입합니다. 몇 가지 스타일을 적용하고 이미지를 자를 수 있도록 두 번째 이미지에 cropped 클래스를 지정합니다. CSS에서 cropped 클래스를 선택하고 height와 width를 150px로 설정합니다. overflow 속성을 hidden으로 설정하십시오. 다음으로 테두리를 만듭니다. 이제 cropped 클래스의 img 태그를 선택하고 여백을 margin: -10px 0px 0px -180px로 설정합니다.

이런 식으로 CSS를 사용하여 HTML에서 이미지를자를 수 있습니다.

예제 코드:

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

object-fit CSS 속성을 사용하여 HTML에서 이미지 자르기

object-fit CSS 속성은 이미지를 자르는 데 도움이 됩니다. 5개의 값을 가질 수 있지만 cover 값은 이미지를 자르기에 가장 적합합니다. object-fit을 cover로 설정하면 이미지의 가로 세로 비율이 유지되는 동시에 콘텐츠 상자의 크기에 맞춰집니다. 또한 object-fit 속성을 object-position과 함께 사용하여 자를 이미지 영역을 조정할 수도 있습니다. object-position 속성에는 두 개의 값이 필요합니다. x% 및 y%는 이미지의 위치를 ​​지정합니다(기본 위치는 50% 50%). 픽셀 위치(xpx 및 ypx)도 제공할 수 있지만 일반적으로 유용하지 않습니다.

예를 들어 그림을 세 번 삽입합니다. 첫 번째 사진이 원본 사진이고 두 장의 사진이 잘린 사진이 됩니다. 두 번째 및 세 번째 그림에 cropped1 및 cropped2 클래스를 지정합니다. 이 그림에 특정 너비, 높이 및 테두리를 설정합니다. object-fit 속성을 사용하고 두 그림 모두에서 cover로 설정합니다. 세 번째 그림에서 object-position 속성을 20% 10%로 설정합니다.

이런 식으로 CSS를 사용하여 HTML에서 이미지를자를 수 있습니다.

예제 코드:

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}