때로는 이미지를 특정 크기에 맞춰야 하는 경우도 있습니다. 이미지의 너비와 높이를 지정하여 이미지 크기를 조정할 수 있습니다. 일반적인 해결책은 다음을 사용하는 것입니다. 최대 너비: 100%; 그리고 높이: 자동; 큰 이미지가 컨테이너 너비를 초과하지 않도록 합니다. 그만큼 최대 너비 그리고 최대 높이 CSS의 속성은 더 잘 작동하지만 많은 브라우저에서 지원되지 않습니다.
이미지 크기를 조정하는 또 다른 방법은 객체에 딱 맞는 이미지에 맞는 속성입니다. 이 CSS 속성은 콘텐츠 상자에 맞게 비디오나 이미지의 크기를 조정하는 방법을 지정합니다. 설정된 너비와 높이로 요소가 컨테이너에 어떻게 들어가는지 정의합니다.
디스플레이 크기를 아는 방법
그만큼 객체에 딱 맞는 속성은 일반적으로 이미지나 비디오에 적용됩니다. 이 속성은 요소가 컨테이너의 너비와 높이에 반응하는 방식을 정의합니다. 주로 5가지 값이 있습니다. 객체에 딱 맞는 다음과 같은 재산 채우다, 포함하다, 덮다, 없음, 축소, 초기 , 그리고 상속하다 . 이 속성의 기본값은 다음과 같습니다. '채우다' .
예
이 예에서는 다음을 사용하여 이미지 크기를 조정합니다. 최대 너비: 100%; 그리고 높이: 자동; 속성.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 지금 테스트해보세요 산출
예
이 예에서는 개체 맞춤: 커버; 재산.
김프 글꼴 목록
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 지금 테스트해보세요 산출
위의 예에서는 씌우다 가치 객체에 딱 맞는 재산. 위의 예와 유사하게 다른 값을 사용할 수 있습니다. 객체에 딱 맞는 속성을 사용하여 이미지 크기를 조정합니다.