종횡비를 유지하면서 HTML 및 CSS를 사용하여 이미지 크기를 조정하고 자르려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

종횡비를 유지하면서 HTML 및 CSS를 사용하여 이미지 크기를 조정하고 자르려면 어떻게 해야 합니까?

Barbara Streisand

풀어 주다： 2024-12-25 09:35:00

원래의

240명이 탐색했습니다.

How Can I Resize and Crop Images Using HTML and CSS While Maintaining Aspect Ratio?

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

소개

특정 치수 내에서 이미지 표시 종횡비를 유지하는 것은 어려울 수 있습니다. 이 문서에서는 HTML과 CSS 기술의 조합을 사용하여 이미지의 크기를 효과적으로 조정하고 자르는 방법을 살펴봅니다.

배경 이미지 크기 조정

background-image 속성을 사용하면 다음을 지정할 수 있습니다. 컨테이너 요소의 배경 이미지입니다. background-size 속성을 Cover로 설정하면 이미지 비율을 유지하면서 컨테이너에 맞게 자동으로 크기가 조정됩니다.

이미지 크기 조정

태그를 사용하여 웹페이지에 이미지를 삽입할 수 있습니다. 너비와 높이 속성을 지정하여 원하는 크기를 명시적으로 설정할 수 있습니다. 그러나 원본 화면 비율이 유지되지 않으면 이미지가 왜곡될 수 있습니다.

기술 결합

크기 조정과 자르기를 모두 달성하려면 위 방법을 결합할 수 있습니다. background-image 속성 집합과 원하는 배경 크기를 사용하여 컨테이너 요소를 만듭니다. 컨테이너 내부에 컨테이너보다 크기가 작은 요소입니다. 요소를 사용하면 원래 가로 세로 비율을 유지하면서 이미지를 원하는 크기로 효과적으로 자를 수 있습니다.

예

다음 코드는 이미지 크기를 조정하고 자르는 방법을 보여줍니다.

.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="Your image">
</div>

로그인 후 복사

이 예에서 크기가 있는 컨테이너 요소(

)는 200px x 150px에는 400px x 300px 크기의 이미지(

)가 포함되어 있습니다. 컨테이너에서 오버플로를 숨김으로 설정하면 이미지가 잘리고 요소를 사용하면 결과 이미지가 가로 세로 비율을 유지하면서 컨테이너에 맞게 효과적으로 크기가 조정되고 잘립니다.

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