避免CSS覆盖引导程序

Question

我正在使用css来改变几个图像的外观。然而，我之前经常遇到的一件事是，当屏幕尺寸变小时，图像会被切断。以下是我制作的一个班级的例子。

.headerimage {
  height: 400px;
  width: 900px;
  margin: 0 auto;
  background: url(../images/metal.jpg);
}

我最近开始使用bootstrap并注意到一个img-responsive类，它允许动态改变图像以适应任何网页，无论大小如何。

当我使用任何css图像类时，使用img-responsive类不起作用。我尝试了以下但是我的css类总是覆盖bootstrap的img-responsive类。

<div class="img-responsive headerimage "></div>

是否有一种方法可以让我的图像css类不会覆盖bootstrap的img-responsive，或者我需要使用HTML来调用我的图像？

<img class="img-responsive" src="/images/metal.jpg" height="400" width="900" />

Answer 1

在您的情况下，我认为您正在寻找的是background-size：

.headerimage {
    max-width: 900px;
    background: url(...);
    background-size: cover;
}

这样你的背景图片将始终填充你的div，而div又调整到容器直到max-width（如果你有某种容器定义你的页面宽度，你也可以省略它） ）。