html - 将图像缩放至全宽并缩放

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;
}

代码笔:http://codepen.io/anon/pen/grRGBe

我尝试添加:min-width: 200%;但它只是拉伸(stretch)图像(而不是缩放)。

Answer 1

尝试通过视口(viewport)大小添加宽度(设置为浏览器大小宽度的 100%)。

.category-image img { position:absolute； 左:50%； 顶部:50%； 高度:自动； 宽度:100vw； -webkit-transform:翻译(-50%，-50%)； -ms-transform: 翻译(-50%,-50%); 变换:翻译(-50%，-50%)； }

或者，根据用途/上下文将其设为背景图像可能会有所帮助。