CSS를 사용하여 페이지에서 동일한 이미지 크기 조정을 달성하는 방법은 무엇입니까? (예)
- 藏色散人원래의
- 2018-08-13 17:11:086526검색
페이지를 탐색하거나 실제 작업을 할 때 가끔 이미지 크기 조정 문제가 발생합니다. 그래서 이 글에서는 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>효과는 다음과 같습니다.
참고: background-size 속성은 배경 이미지의 크기를 지정합니다.
가능한 값:
1, 길이
배경 이미지의 높이와 너비를 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.
2. 백분율
배경 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다. 첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.
3. 표지
배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 크게 확장합니다. 배경 이미지의 일부가 배경 앵커 영역에 표시되지 않을 수 있습니다.
4. 포함
이미지의 너비와 높이가 콘텐츠 영역에 완전히 맞도록 이미지를 최대 크기로 확장합니다.
위는 CSS 이미지의 비례 배율 표시에 대한 자세한 소개입니다. 특정 참조 값이 있어 참조용으로 사용할 수 있습니다.
위 내용은 CSS를 사용하여 페이지에서 동일한 이미지 크기 조정을 달성하는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!