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

您无法将样式应用于儿童的父级。在您的情况下，您可以尝试扩展父级。它会扩展父级和子级

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

Answer 2

尝试从img标签中删除宽度和高度。

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

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

2 个答案: