更新答案（纯 CSS3）
极端的要求有时需要极端的解决方案。我已经在我最初的答案（如下）的基础上制作了一个纯 css 解决方案，它可以工作（并且可以工作）更好，如果您想在其中投入时间）。 current example 在渲染中有点“不稳定”，这对您来说可能没问题，但如果不是，您需要扩展驱动它的 the already obscene number of @media queries（使用 LESS 或SASS；我整理了一个公式驱动的 Excel 电子表格来帮助快速生成数字）。它使用以下代码：
HTML
<div class="box">
<img src="yourImage.jpg" />
</div>
CSS
.box{
height:300px;
min-width: 100px; /*could be different, but you ought to have some min*/
overflow:hidden;
}
.box img {
height: 100%;
width: 100%;
-ms-transform-origin: 100% 100%; /* IE 9 */
-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
-moz-transform-origin: 100% 100%; /* Firefox */
-o-transform-origin: 100% 100%; /* Opera */
transform-origin: 100% 100%;
}
/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width: 100px) {
.box {
-ms-transform:skewY(45deg);
-moz-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
-o-transform:skewY(45deg);
transform:skewY(45deg);
}
.box img {
-ms-transform:skewY(-90deg);
-moz-transform:skewY(-90deg);
-webkit-transform:skewY(-90deg);
-o-transform:skewY(-90deg);
transform:skewY(-90deg);
}
}
以下是度数的计算方法
假设height: 300px 的窄边大约 100px 梯形上的高且相等的角度。这意味着上下偏移量是(300px - 100px) / 2 = 100px。然后.box 角度根据这个公式从@media 查询min-width 金额中扣除：
Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/
对于.box img 角度，取Angle 并乘以-2。这将产生您的.box 和.box img 媒体查询并转换为以下伪代码：
@media screen and (min-width: [your target min-width]) {
.box {transform: skewY(Angle)}
.box img {transform: skewY(-2*Angle)}
}
其运行的平滑程度完全取决于您对min-width 进行更改以获得新的角度设置的微观尺度。正如我在上面的 CSS 代码中的评论中所说，我的示例使用了 51 个媒体查询调用，但仍然有些不稳定。
使用一些 javascript 解决方案会更好吗...可能，但这完全取决于设计者，所以 我在这里提供这个纯粹是为了证明它可以与 pure 一起工作css.
原答案
This seems to be achieving a fluid width.我不知道您想要多少控制图像的显示量或显示部分，因此它可能无法完全满足您的需求，但它确实使用转换来制作灵活宽度的图像给它一个假的透视外观。