背景图片高度较小

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-repeat:无重复；background-size: 68px 200px；