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

情况：

我处于引导状态，因此所有内容都必须响应列容器

我有16:9比例的图像，我想把它们剪辑成40:27左右，像前面所说的那样保持响应

我已经研究过剪辑和掩蔽，到目前为止，至少从我的研究角度来看，如果不根据站点宽度编写新剪辑，这两种方法都不起作用，因为我要的是一个完全流动的站点，所以这不是一个选项

有什么想法吗

附加信息：源图像始终为1920x1080

更新：我创作了这把小提琴：我的想法是：

standin.png强制调整容器大小，背景图像应“可调整”以适合。所以现在的问题是，如何将背景大小设置为正确的高度，然后将其居中放置在生成的容器中

以下是html代码：

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

---

你不能用CSS剪辑，老实说，我怀疑是否有可靠的纯CSS方式可以做到这一点，但这里你有一个非常接近的选择

HTML

---

你们可以发布一张你们想用CSS在引导中屏蔽的图片吗？当然可以。蝙蝠侠补充道！添加了一些附加信息。。。源图像始终为1920x1080，前提是CSS比股票图像更加重要。相关（如果不是重复）：

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

.container { 
width: 400px;
}

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

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