背景图像的高度很小

Question

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

  height: 68px;
  width: 200px;

这会有所帮助，但无论图像大小如何，我都愿意这样做。

以下是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 这就是我想要它的样子：

Answer 1

试试这个， background-repeat：no-repeat; background-size：68px 200px;