css变换比例不缩放父元素

al4*_*4IT 3 html css

我有 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);      
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

use*_*216 5

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

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