Bootstrap图像不可见

Question

我试图制作徽标，但图片并没有显示出来。有人能告诉我它为什么不起作用吗？为什么最小和最大宽度/高度在这里不起作用？

HTML

<div class="container-fluid">
    <div class="head">
        <div class="row">
            <div class="col-sm-offset-1 col-sm-2 logo"></div>
        </div>
    </div>
</div>

CSS

.container-fluid {
  padding: 15px !important;
}
.logo {
  background-image: url("../images/logo.png");
  max-width: 400px;
  max-height: 300px;
  min-width: 50px !important;
  min-height: 30px !important;
}

Answer 1

您必须提及图像的background-size属性以填充定义的区域。

试试这个，

.logo {
  background: url("../images/logo.png") no-repeat;
  background-size : contain;
  max-width: 400px;
  max-height: 300px;
  min-width: 50px !important;
  min-height: 30px !important;
}