Hintergrundbilder haben geringe Höhe

Question

Ich möchte nur zwei Tags mit Hintergrundbildern in der Mitte nebeneinander und haben volle Bildgröße.
Ich weiß, dass, wenn ich

height: 68px; 
    width: 200px; 

hinzufügen würde dies helfen, aber ich würde unabhängig von Bildern Größe zu tun.

Hier ein Beispiel:

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

Hier ist, was ich will es aussehen: diese

Answer 1

versuchen, background-repeat: no-repeat; Hintergrundgröße: 68px 200px;