css变换比例不缩放父元素

Question

我有 2 个带有链接的图像，我尝试将它们缩小到原始图像大小的 50%，每个图像都有不同的大小

如果我添加后边框，我可以看到图像正确地缩小到一半大小，但 A tog 为原始大小

我也在这个页面中使用 bootstrap 3

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

<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>

Answer 1

@Paulie_D的评论似乎很准确，也是我一直在寻找的简单答案：

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