CSS를 사용하여 페이지에서 동일한 이미지 크기 조정을 달성하는 방법은 무엇입니까? (예)-CSS 튜토리얼-php.cn

CSS를 사용하여 페이지에서 동일한 이미지 크기 조정을 달성하는 방법은 무엇입니까? (예)

藏色散人

풀어 주다： 2018-08-13 17:11:08

원래의

6544명이 탐색했습니다.

페이지를 탐색하거나 실제 작업을 할 때 가끔 이미지 크기 조정 문제가 발생합니다. 그래서 이 글에서는 CSS 이미지의 균등 스케일링 문제, 즉 CSS 이미지의 균등 비율 표시 문제를 소개하겠습니다. 도움이 필요한 사람들에게 도움이 되기를 바랍니다.

CSS 이미지를 동일한 비율로 표시하는 구체적인 코드 예는 다음과 같습니다.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css图片等比例显示代码示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }
    </style>
</head>
<body>
<div class="demo1-1">
    <div class="zoomImage" style="background-image: url(2.png)"></div>
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS를 사용하여 페이지에서 동일한 이미지 크기 조정을 달성하는 방법은 무엇입니까? (예)