CSS3에서 img의 동일한 비율 감소를 달성하는 방법-CSS 튜토리얼-php.cn

CSS3에서 img의 동일한 비율 감소를 달성하는 방법

WBOY

풀어 주다： 2021-12-14 18:11:34

원래의

11545명이 탐색했습니다.

CSS에서 변형 속성은 scale() 함수와 함께 사용되어 img 요소의 동일한 축소를 실현할 수 있습니다. 변형 속성을 사용하면 요소의 크기 조정 작업을 설정할 수 있습니다. scale() 함수는 정의하는 데 사용됩니다. 요소의 크기 조정 변환 구문은 "img{transform:scale (zoom ratio);}"입니다.

CSS3에서 img의 동일한 비율 감소를 달성하는 방법

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

출력 결과:

CSS3에서 img의 동일한 비율 감소를 달성하는 방법