背景图像的高度很小

Question

我只想要两个带背景图像的<a/>标签并排放置在中央并具有完整的图像尺寸。
我知道，如果我添加

height: 68px; 
    width: 200px; 

这会有所帮助，但我想，无论做图片的大小。

下面是一个例子：

.logos { 
 
    display: flex; 
 
} 
 

 
.logo { 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.logo:first-child { 
 
    background-image: url('http://via.placeholder.com/173x68'); 
 
} 
 

 
.logo:last-child { 
 
    background-image: url('http://via.placeholder.com/200x68'); 
 
} 
 

 
.visuallyhidden { 
 
    border: 0; 
 
    -webkit-clip-path: inset(50%); 
 
    clip-path: inset(50%); 
 
    display: inline-block; 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
    /* 1 */ 
 
    width: 1px; 
 
}

<div class="logos"> 
 
    <a href="#" class="logo"> 
 
    <span class='visuallyhidden'>1st link</span> 
 
    </a> 
 
    <a href="#" class="logo"> 
 
    <span class='visuallyhidden'>2nd link</span> 
 
    </a> 
 
</div>

这里就是我想要它看起来像：

Answer 1

试试这个， 背景重复：不重复; background-size：68px 200px;