html - css transform scale 不缩放父元素

Question

我有 2 张带有链接的图片，我想将它们缩小到原始图片大小的 50%，每张图片都有不同的大小

如果我添加后边框，我可以看到图像被正确缩小到一半大小，但 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);      
}

Answer 1

来自 @Paulie_D 的评论似乎很准确，我一直在寻找简单的答案:

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