响应式图像裁剪

Question

我一直在尝试裁剪尺寸低于768像素宽的屏幕尺寸的图像。图像应从左侧和右侧均等地裁剪。

以下是全尺寸图像的示例（图像尺寸为900px宽，250px高。：

这是我在屏幕尺寸小于768p宽时尝试创建的裁剪版本。在这个版本中，图像宽度为320像素，但它应该以768像素开始裁剪：

以下是我目前使用的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%;
}

Answer 2

你总是可以使用更高的z-index值绝对地将左右两个div放在一起。

我从未使用或看过任何通过css进行图像裁剪，但你绝对可以在油漆或photoshop中裁剪图像，上传两张图片，然后用css换出想要显示的图像，并可能使用媒体查询

Answer 3

具有艺术指导（选择性裁剪/缩放）的响应式图像是一个棘手的领域。幸运的是，你只是试图向中心裁剪，这有点容易。 Roko的解决方案似乎适合css，但你仍在加载全尺寸图像（慢）。

如果您想进一步优化和提高页面速度，您应该加载不同大小的图像，以便移动浏览器不必下载桌面大小或更差的视网膜显示大小的图像。常见的解决方案是使用媒体查询断点和CSS3替换你的img.src，并准备好预先裁剪的图像版本。

或者，您可以使用Pixtulate等服务为每位访问者动态执行此裁剪。这也可以让你通过预先设定的焦点裁剪中心，并且每个访客的屏幕上的图像尺寸都会正确。