CSS3에서 img의 동일한 비율 감소를 달성하는 방법
- WBOY원래의
- 2021-12-14 18:11:3411593검색
CSS에서 변형 속성은 scale() 함수와 함께 사용되어 img 요소의 동일한 축소를 실현할 수 있습니다. 변형 속성을 사용하면 요소의 크기 조정 작업을 설정할 수 있습니다. scale() 함수는 정의하는 데 사용됩니다. 요소의 크기 조정 변환 구문은 "img{transform:scale (zoom ratio);}"입니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 img의 비례 축소를 달성하는 방법
Css에서 img 요소의 비례 축소를 달성하려면 변환 속성과 scale() 함수를 사용해야 합니다.
transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.
scale() 함수는 요소의 크기 조정 변환을 정의하는 데 사용됩니다.
scale() 함수 함수의 값은 요소의 크기 조정 비율입니다.
예제는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:scale(0.5);
}
</style>
</head>
<body>
<img src="1118.02.png" class="img1" alt="CSS3에서 img의 동일한 비율 감소를 달성하는 방법" >
<p>上面是等比例缩小的，下面是原比例</p>
<img src="1118.02.png" alt="CSS3에서 img의 동일한 비율 감소를 달성하는 방법" >
</body>
</html>출력 결과:
(학습 영상 공유: css 영상 튜토리얼)
위 내용은 CSS3에서 img의 동일한 비율 감소를 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.