如何在CSS中屏蔽或剪辑图像

Question

情况：

我在引导程序中，所以一切都必须响应列容器。

我的图像比例为16：9，并希望将它们剪辑为40:27左右，如前所述保持响应。

我已经研究了剪辑和遮罩，到目前为止，至少从我的研究的角度来看，如果没有根据网站宽度编写新剪辑也不会工作，因为我要去一个完全流畅的网站，这不是'一个选项。

有什么想法吗？

其他信息：源图像始终为1920x1080

更新：我创造了这个小提琴：http://jsfiddle.net/sckdd6hq/1/，并认为：

standin.png强制容器大小，背景图像应该“相当大”以适应。那么现在的问题是如何将背景大小设置为正确的高度，然后将其置于生成的容器中？

这是html代码：

<div class="container">
<div class="flexcon">
<img src="http://s28.postimg.org/l0hz0do5p/standin.png" />
</div>
</div>

和CSS：

.flexcon { 
    background-image: url("http://s1.postimg.org/ffw8n4yjz/Google_Logo_Loop_GIF_01.gif");
    background-size: 100% 100%;
}

.container { 
width: 400px;
}

Answer 1

你无法用CSS剪辑做到这一点，老实说，我怀疑它是一种可靠的纯CSS方式，但在这里你有一个非常接近的选择。

HTML

<div class="container">
    <div class="fakecell"></div>
    <div class="flexcon">
        <img src="http://s1.postimg.org/ffw8n4yjz/Google_Logo_Loop_GIF_01.gif" />
    </div>
</div>

CSS

.container {
    width: 100%;
    display: inline-block;
    position: relative;
}
.fakecell {
    padding-top: 6.75%;
    /* 40:27 aspect ratio */
}
.flexcon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.flexcon img {
    width:100%;
    height:auto;
}

Fiddle here