背景图像最大尺寸 - Bootstrap 3

Question

我在 Bootstrap 3 中有一行包含 2 列。

在“桌面”上，徽标的宽度为 3 列，导航宽度为其余 8 列

+----------------+----------------------------- -----+
|我的徽标    |我的导航        |
| | |
+----------------+-------------------------------- --+

我的徽标是一个背景图片，并且有一些 CSS 可以将其缩放到可用空间（div 的宽度和高度）。

我的问题

在较小的视口上，我将徽标和导航设置为 100% 或 12 列。 IE 垂直堆叠，顶部有徽标，导航栏不向下。

+--------------+
|我的标志 |
+----------------------------+
| 我的导航     |
+----------------------------+

但是，一旦采用这种布局，我的徽标就会变得很大并且被裁剪。 我将徽标 DIV 设置为 150 像素的最大高度，但徽标背景正在缩放可用的整个宽度并在信箱中裁剪。我宁愿它占用它可用的最大高度（150px）并根据它按比例定义它的宽度。

有什么建议吗？提前感谢您的宝贵时间。

logo-wrapper {
background-image: url(../../../images/logo.png);
background-repeat: no-repeat;
height: 150px;

background-size: 100%;
background-position: center bottom;
}

Answer 1

设置background-size: cover 应该可以解决您的问题。
检查background-size documentation。