CODEWITHSUNDEEP
htmlcss
al404IT
al404IT

Reputation: 1418

css transform scale doesn't scale parent element

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

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

Upvotes: 4

Views: 12301

Answers (3)

user17548216
user17548216

Reputation: 61

Comment from by @Paulie_D seems to be spot on and the simple answer I was looking for:

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

Upvotes: 5

Franco A.
Franco A.

Reputation: 32

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>

Upvotes: -1

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

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

Upvotes: 0

Related Questions