1

我目前正在尝试修改以全屏图像作为主页的 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 以实现我想要实现的目标吗？将不胜感激！谢谢。

4

3 回答 3

0 
 .slides.full img {
  max-width:100%; /* lower virsion of IE won't work width max-width */
  width:100%;         /* for IE */
}
于 2013-03-01T07:17:14.060 回答
0

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

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

于 2013-03-01T01:20:23.827 回答
0

这将为 img 保持正确的比例

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

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

于 2013-03-01T01:41:31.840 回答