CSS만 사용하여 이미지 크기를 조정하고 특정 치수로 자르려면 어떻게 해야 합니까?

CSS를 사용하여 크기가 조정되고 잘린 이미지 표시

요구 사항: 지정된 너비와 높이로 URL의 이미지를 표시합니다. , 원래 종횡비에 관계없이. 이미지 크기를 조정한 다음 원하는 크기에 맞게 잘라야 합니다.

해결 방법: img와 배경 이미지 속성을 결합합니다.

• img를 사용하여 크기 조정 가로세로 비율을 유지하면서 이미지를 만듭니다.
• 배경 이미지를 사용하여 크기가 조정된 이미지를 원하는 크기로 자릅니다.

예:

200x100으로 표시하려는 800x600픽셀 크기의 이미지를 생각해 보세요. 픽셀.

HTML:

<div class="crop">
    <img src="https://i.sstatic.net/wPh0S.jpg" alt="Donald Duck">
</div>

CSS:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

설명:

• .crop 클래스는 원하는 너비와 높이로 이미지의 컨테이너를 정의합니다.
• img 요소는 가로 세로 비율을 유지하면서 이미지 크기를 조정하는 데 사용됩니다. 원본 크기 비율을 유지하도록 너비와 높이가 설정됩니다.
• img 요소에 음수 여백이 적용되어 .crop 컨테이너 내에서 가운데로 자르고 자릅니다. 여백은 원본 이미지의 전체 크기(400px x 300px)와 원하는 표시 크기(200px x 100px)를 기준으로 계산됩니다.

이 접근 방식을 사용하면 이미지의 크기를 동적으로 조정하고 자를 수 있으므로 다음과 같은 이점이 있습니다. 다양한 디바이스에서 원하는 크기와 화면 비율로 표시됩니다.

위 내용은 CSS만 사용하여 이미지 크기를 조정하고 특정 치수로 자르려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!