Html 避免CSS覆盖引导

我正在使用css来改变几个图像的外观。然而，我以前一直有一个问题，就是当屏幕变小时，图像会被剪切。下面是我制作的一个类的示例

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

我最近开始使用bootstrap，并注意到一个img响应类，它允许动态更改图像以适应任何网页，而不管大小

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

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

有没有一种方法可以使我的图像css类不覆盖bootstrap的img响应，或者我需要使用HTML来调用我的图像

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

---

在你的情况下，我想你要找的是背景尺寸：

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

---

这样，您的背景图像将始终填充您的div，而div又会根据容器的最大宽度进行调整（如果您有某种定义页面宽度的容器，则也可以忽略该宽度）。

为什么需要在使用.img responsive？的同时显式设置图像的宽度和高度。img-responsive不适用于固定大小，它没有意义。我认为

img-responsive

仅适用于图像…这不是重点吗？“img-responsive”适用于图像，而不是背景。例如，一幅图像是1024x768，我更希望它是一幅矩形图像。没有办法设置尺寸使其成为矩形，然后在页面尺寸太小时让.img responsive更改图像，但保持为矩形吗？@Paulie_D All

img responsive

基本上是设置

最大宽度：100%

。你可以将它应用于任何元素。有一件事我不是很清楚，每当使用“最大宽度”或“最大高度”时，我的背景图像都无法加载。这有什么原因吗？到目前为止，我一直避免使用max-仅仅是因为这个。@Valrok，div中除了背景图像之外还有什么吗？如果不是，那么div的高度将为零，也许这就是问题所在？