CSS变换缩放不会改变父元素大小

Question

我有两张带链接的图片，我想将它们缩小到原始尺寸的50％，每张图片的大小都不同。

如果我添加背景边框，我可以看到图像已正确缩小到一半的大小，但是A tog仍然是原始大小。

我在此页面中还使用了Bootstrap 3。

<div class="header-tit-logos">
    <a href="http://www.mylink.com" target="_blank"><img src="static/images/img1.png" alt="img 1" width="60" height="117"></a>
    <a href="http://www.mylink.com" target="_blank"><img src="static/images/img2.png" alt="img 2" width="145" height="54"></a>
</div>

.header-tit-logos a {
    display: inline-block;
}

.header-tit-logos img {
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);      
}

- al404IT

---

transform:scale()是完全视觉效果，它实际上不会改变元素的大小。 - Paulie_D

当使用时，似乎它不会改变元素的空间，有什么解决方法吗？我想做的是根据图像的原始大小调整图像大小。img1为60，我想将其调整为30px，而无需在CSS中指定大小，而是使用百分比。 - al404IT

不行...由于百分比图像大小是基于父级的，所以您必须在CSS中使用宽度/高度。 - Paulie_D

我知道这就是我在寻找一些解决方法的原因 :( - al404IT

@Paulie_D：如果你写了这样的答案，我会点赞的。你那一句话比我读 CSS 文档和搜索网络花费的 20 分钟更让我理解了正在发生的事情。谢谢。 - Michael Scheper

Answer 1

@Paulie_D的评论似乎非常准确，也是我寻找的简单答案：

transform:scale() 是一种完全视觉效果。它并不会实际改变元素的大小。

- user17548216

Answer 2

你不能从子元素向父元素应用样式。 在你的情况下，可以尝试缩放父元素。它会同时缩放父元素和子元素。

.header-tit-logos {
-ms-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);      
 }

- Pranesh Ravi

---

如果我将 position 设置为绝对定位的 scale.header-tit-logos 元素相对于其父元素进行缩放，那么它的位置会变得奇怪，即使指定了位置也不正确。 - al404IT

@al404IT很遗憾，您无法从子元素缩放父元素。相反，尝试在绝对定位元素周围的包装器上添加相对位置。 - Pranesh Ravi

Answer 3

尝试从img标签中移除宽度和高度。

.header-tit-logos a {
    background:red;
    display: inline-block;
}

.header-tit-logos img {
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);      
}

<div class="header-tit-logos">
    <a href="http://www.mylink.com" target="_blank"><img src="http://media.istockphoto.com/photos/medium-golden-brown-wood-texture-background-picture-id513694258?k=6&m=513694258&s=170667a&w=0&h=xETakP7VjpAtRj9e6rJRYNqw_AJLZ9ovLlC4ebR5BOQ=" alt="img 1" width="60" height="117"></a>
    <a href="http://www.mylink.com" target="_blank"><img src="https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg" alt="img 2"></a>
</div>

- Franco A.