css - 缩放浏览器时全屏背景图像的最小尺寸

Question

我目前正在尝试修改一个以全屏图像作为主页的 wordpress 主题。现在它在浏览器中缩放得很好，唯一的问题是它不会比原始图像尺寸小。它会变大并保持其宽高比，但当您缩小窗口时，它不会变小到默认图像大小。

这是这部分主题中的 CSS:

/* full screen slides */
.slides.full {
  position: absolute;
  top: 0;
  left: 0;
  background: #373432;
  width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.slides.full img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}

我使用了另一种方法使图像比原始尺寸小，但它并没有固定在浏览器的高度上，下面只有一个灰色背景。

是否有人可以帮助我更改我发布的 css 来实现我想要实现的目标？将不胜感激!谢谢。

Answer 1

您是否尝试过将 max-widht: 100% 和 max-height: 100% 添加到 .slides.full img？

这只是一个疯狂的猜测。看到一个实例会很有帮助。