CSS를 사용하여 이미지 크기를 비례적으로 조정

애플리케이션을 반응형으로 만들려면 이미지도 반응형으로 만들어야 합니다. 이미지가 응답하지 않으면 응용 프로그램에서 오버플로가 발생하여 최악으로 보입니다.

따라서 상위 요소의 크기에 따라 이미지의 크기를 비례적으로 늘리거나 줄여야 합니다. 여기서는 CSS를 사용하여 이미지의 크기를 비례적으로 조정하는 다양한 방법을 알아봅니다.

문법

사용자는 아래 구문에 따라 "너비" CSS 속성을 사용하여 이미지 크기를 비례적으로 조정할 수 있습니다.

으아악

위 구문에서는 이미지의 너비와 자동 높이를 100%로 설정하여 반응형으로 만들었습니다.

예

아래 예에서는 div 요소를 생성하고 "image" 클래스 이름을 지정한 다음 div 요소 내에 이미지를 하위 요소로 추가했습니다.

CSS에서는 div 요소의 너비를 전체 너비의 30%에 해당하는 백분율로 설정합니다. 또한 이미지의 너비와 높이를 100%로 설정했습니다. 사용자는 화면 크기를 변경할 수 있으며 화면 크기에 비례하여 이미지 크기가 줄어들거나 늘어나는 것을 볼 수 있습니다.

으아악

예

아래 예에서는 "object-fit: contain" CSS 속성을 사용하여 이미지 크기를 축소했습니다. 여기서는 이미지의 상위 div 요소의 비례 너비를 설정합니다. 또한 "img" 요소에 "object-fit: contain" CSS 속성을 사용하고 있습니다. 출력에서 사용자는 이미지가 반응하고 div 요소의 크기에 따라 크기가 변경되는 것을 확인할 수 있습니다.

으아악

예

아래 예에서는 "배경 크기" CSS 속성을 사용하여 이미지 크기를 비례적으로 변경합니다. 여기서는 div 요소의 배경 이미지를 설정합니다. 또한 "배경 크기" CSS 속성의 값으로 "포함"을 사용합니다. div 전체에 이미지가 퍼집니다. div 요소의 크기가 커지면 이미지 크기도 늘어납니다. div 요소의 크기가 줄어들면 이미지의 크기도 줄어듭니다.

으아악

사용자는 이미지 크기를 비례적으로 변경하는 방법을 배웠습니다. 여기서 해야 할 일은 이미지 크기를 픽셀이나 rem이 아닌 백분율로 설정하는 것뿐입니다. 또한 사용자는 "배경 크기" CSS 속성을 사용하여 배경 이미지의 크기를 비례적으로 변경할 수 있습니다.

위 내용은 CSS를 사용하여 이미지 크기를 비례적으로 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!