Html 无法获取图像以占用整个容器

我有一些容器中的图像有点奇怪。图像没有占据整个容器，并且它们似乎没有正确居中。我将宽度和最大宽度设置为100%。我在下面贴了一张截图，显示了它目前的样子，以及我正在努力实现的目标。代码也在下面。另外，有谁能给我一些建议，如何实现第二张图片中的过滤效果？非常感谢您的帮助

它现在看起来是什么样子

我正在努力实现的目标：

HTML:

---

要调整图像大小，请尝试以下操作：

.slide img {
width:100%;
height:auto;
}

对于过滤效果，请尝试类似以下CSS3的方法。如果您希望每张幻灯片具有不同的效果，则需要向li元素添加不同的类：

-webkit-filter: grayscale(0.5) hue-rotate(40deg);

---

要调整图像大小，请尝试以下操作：

.slide img {
width:100%;
height:auto;
}

对于过滤效果，请尝试类似以下CSS3的方法。如果您希望每张幻灯片具有不同的效果，则需要向li元素添加不同的类：

-webkit-filter: grayscale(0.5) hue-rotate(40deg);

---

要在图像上实现覆盖效果，可以使用一些新的CSS3过滤器属性，但浏览器支持将受到限制。还有一个选项使用：在.slide li上的伪元素之后，绝对定位它，给它一个背景色，降低不透明度，就像这样

.contentbox {
  position: relative;
}

.contentbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: #000; // Change this to the colour you want
  opacity: 0.3;
}

.slides li {
  position: relative;
  z-index: 100;
}

---

我希望这有助于

要在图像上实现覆盖效果，可以使用一些新的CSS3过滤器属性，但浏览器支持将受到限制。还有一个选项使用：在.slide li上的伪元素之后，绝对定位它，给它一个背景色，降低不透明度，就像这样

.contentbox {
  position: relative;
}

.contentbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
  background-color: #000; // Change this to the colour you want
  opacity: 0.3;
}

.slides li {
  position: relative;
  z-index: 100;
}

---

我希望这有助于

我认为最大宽度：100%是使图像显示为上传图像大小的100%，而不是容器大小。您是否尝试过删除最大宽度并添加自动高度？谢谢您的回复。我试过了，看起来一模一样。@steffcarrington哇，我清除了缓存，它成功了！谢谢现在只是为了过滤效果，哈哈。没问题！我认为它是过滤器，你是说某种叠加效果？我将添加代码作为答案。除非您的图像始终具有相同的尺寸，否则将它们作为背景图像，并使用背景大小：封面和背景位置：中心将获得更好的效果，因为它将始终覆盖图像，同时尽可能少地切断，我认为最大宽度：100%使图像显示为上传图像大小的100%，而不是容器大小。您是否尝试过删除最大宽度并添加自动高度？谢谢您的回复。我试过了，看起来一模一样。@steffcarrington哇，我清除了缓存，它成功了！谢谢现在只是为了过滤效果，哈哈。没问题！我认为它是过滤器，你是说某种叠加效果？我将添加代码作为答案。除非您的图像始终具有相同的尺寸，否则将它们作为背景图像，并使用背景大小：封面和背景位置：中心将获得更好的效果，因为它将始终覆盖图像，同时尽可能少地切断，并在容器中指向中心。非常感谢所有人的回答，如此巨大的帮助。我真的很感激。事实证明，我需要使用来获取图像的调色板，并将其用作过滤器。没问题，很高兴您解决了问题。非常感谢所有人的回答，非常大的帮助。我真的很感激。原来我需要用它来获取图像的调色板，并将其用作过滤器。没问题，很高兴你解决了这个问题。