Question

我有以下html

<a class=logo></a>

我想用我的徽标替换它。但我希望徽标占据垂直房间的100％，并且一定数量的水平房间会使图像成比例

我可以尝试

.logo {
  background-image: 'logo.svg';
  background-size: auto 100%;
}

除了我仍然需要设置height和width以便占用空间。

我可以尝试

.logo:before {
  content: url('logo.svg');
}

除了设置图像高度和宽度的唯一方法是

zoom: X%

或

transform: scale(50%);

这些都不会对改变高度做出反应

我还有其他方法吗？

修改：fiddle - 如何在此处获得正确的宽度？

Answer 1

如果您想要一个宽度为100％且高度与背景图像宽高比相匹配的比例框，请将垂直填充设置为与垂直比率匹配的百分比。

即。如果您的徽标是2：1矩形，请将宽度设置为100％，并将填充设置为25% 0，并且您的代码将保持按比例调整大小（您需要将其设置为display: block;）。然后background-size: 100% auto（或其他方式）应该有效，因为背景图像的纵横比与其容器相同。