html - 避免 CSS 覆盖 Bootstrap

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，它又会根据容器调整到它的 max-width (如果你有某种容器，你也可以省略它定义您的页面宽度)。