5

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

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

这是我在屏幕尺寸小于 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/

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

4

3 回答 3

3

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%;
}
于 2013-03-25T16:30:26.203 回答
1

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

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

或者，您可以使用Pixtulate等服务为每个访问者动态执行此裁剪。这也将使您能够通过预设的焦点裁剪中心，并且您的图像将针对每个访问者的屏幕正确调整大小。

于 2014-02-28T20:44:28.163 回答
1

您始终可以使用较高的 z-index 值将某些 div 绝对定位在左右两侧。

我从未使用或见过任何通过 css 裁剪的图像，但您绝对可以在paint 或 photoshop 中裁剪图像，上传两个图像，然后用 css 替换您想要显示的图像，并可能使用媒体查询。

于 2013-03-25T16:30:15.890 回答