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？

这只是一个疯狂的猜测。看一个现场例子会很有帮助。

Answer 2

这将保持img

的正确比例

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

并更改为height:100%会在调整大小时拉伸img

Answer 3

 .slides.full img {
  max-width:100%; /* lower virsion of IE won't work width max-width */
  width:100%;         /* for IE */
}

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

3 个答案: