css - 在使用 CSS scale 属性缩小 CSS Logo 时，div 似乎保持其原始大小，尽管其内容缩小了。有小费吗？

Question

这里是新手，在此先感谢您的耐心和帮助。

我正在尝试用 CSS 创建 Logo (主要是因为我没有 Photoshop 或类似程序的知识)，并且我对缩放图像很感兴趣，以便在我可能需要它的各种尺寸版本时使用。我尝试缩放属性，这使 Logo 有些变形，但缩放属性似乎效果很好。我遇到的问题是，虽然 div 出现 可以正确缩放，但似乎 div 保持其指定的宽度/高度(167px，167px)，但其中一半现在充满了空白.那是怎么回事还是我错过了什么？谁有一些解决方案？

这就是我所描述的:http://codepen.io/miskellaneousness/pen/LNXrzv

这是原始大小的 div:

.logo1{
 width:167px;
 height:167px;
 border:1px solid black; 
 border-radius:2px;
 float:left;
 -webkit-user-select: none;   
 -moz-user-select: none;
 -ms-user-select: none;
 margin-left:10px;
 margin-right:0px;
 }

这是按比例缩放的 Logo :

.logo2{
 width:167px;
 height:167px;
 border:1px solid black; 
 border-radius:2px;
 float:left;
 -webkit-user-select: none;   
 -moz-user-select: none;
 -ms-user-select: none;
 margin-left:0px;
 transform: scale(.5);
 }

Answer 1

我明白你的意思了。您正在寻找 transform-origin:; CSS 属性。检查一下:http://codepen.io/anon/pen/ZWmRro

我将 transform-origin: top left; 添加到您的缩放 Logo 中。您可以像这样指定值:

• 居中、左上、中下……您明白要点了。
• 您也可以使用 20% 40% 等百分比。

试试吧!