Question

我有一张图片用于填充浏览器的整个宽度，但限制在一定高度。它正在工作但是如果用户使他们的浏览器窗口大于某个点，它会在侧面给出空白区域。如何告诉它然后有效地缩放图像以在缩放时仍然占据整个宽度？

这是我的代码：

<div class="category-image">
  <img src="http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg"></img>
</div>

.category-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

p.category-image, .category-description {
    margin-bottom: 35px;
    position: relative;
    height: 450px;
}

Codepen：http://codepen.io/anon/pen/grRGBe

我尝试加入：min-width：200％;但它只是拉伸图像（而不是缩放）。

Answer 1

尝试通过视口大小添加宽度（设置为浏览器大小的100％）。

.category-image img { position: absolute; left: 50%; top: 50%; height: auto; width: 100vw; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

或者，取决于使用/背景，使其成为背景图像可能是有益的。

Answer 2

body {

    height: 100%;
    margin: 0;
    background: url(http://i988.photobucket.com/albums/af2/pipewun/Awwshop/DSCF0951.jpg) center fixed no-repeat;
    background-size: cover;

}

Answer 3

以下是我在您的CodePen中所做的事情。

body {
  background: url('http://www.sfsuicide.org/wp-content/uploads/2010/04/flower-banner.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

这是做什么的：

使用＆＃34; body {＆＃34;
使用＆＃34;背景：url（...＆＃34;
将背景设置为不重复，因为它喜欢默认重复。
以背景为中心，如果您希望它与页面顶部对齐，则需要将其更改为＆＃34; center top＆＃34;
这是一个神奇的元素，使它做你想要的...设置大小覆盖使背景放大，以填充整个空间，即使图像不是那么大。封面是我使用的，请参阅此W3Schools页面，了解您的选项是什么以及您希望您的背景做什么。 http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 4

以上是我上面回答的替代答案...更简单，我没有对它进行过广泛的测试，但是当我在3台显示器上拉伸窗口时，它似乎按预期工作。

将此应用于您的CSS代码笔...... :)

.category-image img {
        min-width:100%;
    }

    p.category-image, .category-description {
        margin-bottom: 35px;
        position: relative;
        height: 450px;
    }

将图像缩放到全宽和缩放

4 个答案: