【网页开发】css关于网页端transform的scale()缩放白边问题

小卓仗剑走天涯

已于 2022-06-14 16:16:56 修改

阅读量4.5k

点赞数 1

分类专栏：网页开发文章标签： css css3 html

于 2022-01-19 13:38:59 首次发布

本文链接：https://blog.csdn.net/m0_66345324/article/details/122579078

版权

网页开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题简介

今天又遇到了一个难题，让我调试了一个下午，就是css关于网页端transform的scale()缩放会出现白边的问题。

这个问题在网页端不算大问题，让我苦恼的是在手机端，每款手机的比例不一样，缩放自然不也一样，这个问题下篇再说，接下来让我们简单聊聊单纯网页端出现这个问题的解决方法。

案例

此处亲手编写的测试网页，简单明了，废话不多说，上代码！

原代码

<!DOCTYPE html>
<head>
	<title></title>
	<meta charset="UTF-8" />
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		#outer1{
			width: 100%;//宽度自适应屏幕宽度
			height: auto;//高度自适应
			background: #CCC;
		}
		.inner{
			height: 500px;
			width: 1200px;
			background: #B1FBF3;
			margin: 0 auto;
		}
		#outer2{
			width: 100%;
			height: 300px;
			background: #FAB000;
		}
	</style>
</head>
<body>
	<!--此处考虑网页一般都是100%宽度，我们设置内层为固定长度1200px-->
	<div id="outer1">
		<div class="inner">
		</div>
	</div>
	<div id="outer2">
	</div>
</body>
</html>

原效果图

缩放代码

       .inner{
           height: 500px;
           width: 1200px;
           background: #B1FBF3;
           margin: 0 auto;
           transform: scale(0.5);/*缩放比例50%*/
           transform-origin: left top 0;/*div以（0,0）坐标为基准，位于左侧上方*/
       }