避免 CSS 覆盖引导程序

Question

我正在使用 css 来改变几个图像的外观。然而，我之前一直遇到的一件事是，当屏幕尺寸变小时，图像会被剪切。下面是我制作的一个类的示例。

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

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

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

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

有没有一种方法可以让我的图像 css 类不覆盖引导程序的 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（如果您有某种定义页面宽度的容器，您也可以省略它）。