背景圖像的高度很小

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;