"css变换比例不缩放父元素"

Question

I have 2 image with a link, i'm tring to scale them down to 50% of original image size, each image has a different size

if i add a back border i can see that image is correctly scaled down to half size but A tog is in original size

I'm also using bootstrap 3 in this page

<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

You cannot apply style to a parent from a child. In your case you can try to scale the parent. It'll scale both the parent and the children

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

Answer 2

Comment from by @Paulie_D seems to be spot on:

transform:scale() is an entirely visual effect. It does not actually change the size of the element.

Answer 3

Try removing width and height from img tag.

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