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

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

문제:

표시하고 싶습니다. 가로 세로 비율이 원하는 크기와 다른 경우에도 특정 너비와 높이의 URL 이미지입니다. 목표는 원래 비율을 유지하면서 이미지 크기를 조정한 다음 원하는 크기로 자르는 것입니다.

CSS 솔루션:

크기 조정과 자르기를 모두 달성하려면, 다음 기술을 결합할 수 있습니다.

• 크기 조정: HTML 사용 img 요소의 width 및 height 속성을 사용하여 이미지 크기를 조정합니다. 이렇게 하면 원본 이미지의 가로 세로 비율이 유지됩니다.
• 자르기: 원하는 최종 크기로 컨테이너 요소(예: div)를 만듭니다. 초과 이미지를 자르려면 이 컨테이너에 대해 Hidden 오버플로를 설정합니다.

구현:

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

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

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

이 예에서는:

• 이미지 크기는 너비 200px, 높이 200px로 조정됩니다. 150px(가로세로 비율 유지).
• 여백 속성은 컨테이너 내에서 위치를 이동하여 이미지를 자르는 데 사용됩니다.
• 컨테이너의 오버플로 속성은 숨김으로 설정되어 이미지에서 원하는 부분은 표시됩니다.

결과:

이 조합을 사용하면 원래 화면 비율을 유지하고 원하는 크기에 맞게 자르면서 이미지를 특정 크기로 표시할 수 있습니다. 크기입니다.

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