自适应图像裁剪

Question

我一直在尝试裁剪屏幕宽度小于768像素的图像。图像应从左侧和右侧均匀裁剪。

这是全尺寸图片的示例（图片尺寸为900px宽x 250px高。：

这是我试图在屏幕尺寸小于768p宽时创建的裁剪版本。在此版本中，图片的宽度为320px，但应以768px开始裁剪：

这是到目前为止我一直在使用的HTML：

<div class="container">
    <div class="image-container">
        <img src="http://i.imgur.com/H7cpsLK.jpg" />
    </div>
</div>

这是CSS：

.container {
    width: 1280px;
    max-width: 100%;
    min-width: 768px;
}

.image-container {
    width:100%;
}

img {
    max-width:100%;
    height:auto;
}

@media only screen and (max-width:768px) {
    .image-container {max-width:768px; overflow:hidden;}
}

这是我一直在尝试创建的小提琴：http : //jsfiddle.net/QRLTd/

是否可以同时从左右两侧裁剪图像？

Answer 1

LIVE DEMO

HTML：

<div class="container">
    <div class="image-container"></div>
</div>

CSS：

.container {
    width: 100%;
    height:200px;
}

.image-container {
    position:relative;
    margin:0 auto;
    background:url(http://i.imgur.com/H7cpsLK.jpg) no-repeat center center;
    background-size:cover;
    max-width:768px;
    width:100%;
    height:100%;
}