在使用CSS缩放属性缩小CSS徽标时，div似乎保持其原始大小，尽管其内容缩小。有小费吗？

新手在这里，所以先感谢您的耐心和帮助。在使用CSS缩放属性缩小CSS徽标时，div似乎保持其原始大小，尽管其内容缩小。有小费吗？

我在CSS中创建一个徽标（主要是因为我没有Photoshop或类似程序的知识），我有兴趣缩放图像，因为我可能需要它的各种尺寸的版本。我试图放大属性，这有点扭曲了徽标，但规模属性似乎运作良好。我遇到的问题是，尽管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; 
}

这里的缩放标志：

.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); 
}

来源

2016-05-02 miskellaneousness

你在做什么浏览器？它适合我的规模，而div只占据应有的位置。 –

铬。它也适合我的尺寸，但尽管边距设置为0，但小徽标周围仍有一些空白。当我复制小徽标时，它更清晰：http://codepen.io/miskellanessness/pen/LNXrzv。为什么这两个小徽标相隔甚远？这就是为什么它看起来像div保持其原始参数。 – miskellaneousness

我得到你的意思了。您正在寻找transform-origin:; CSS属性。看看这个：http://codepen.io/anon/pen/ZWmRro

我加transform-origin: top left;到您的缩放标志。您可以指定如下的值：

中心中心，左上角，下方中心......您将获得要点。
你也可以用百分之20％40％。

试一试！

来源

2016-05-02 22:44:33

非常感谢您的帮助！这就是它。 – miskellaneousness

不客气，很高兴提供帮助。 –

虽然这实际上提出了一个类似的问题：是否可以使元素与变换元素齐平？例如，可以将Box 3移动到这里的变形徽标？ http://codepen.io/miskellanessness/pen/LNXrzv – miskellaneousness

在使用CSS缩放属性缩小CSS徽标时，div似乎保持其原始大小，尽管其内容缩小。有小费吗？

回答

相关问题