响应式图像裁剪

Posted 2023-03-06

【中文标题】响应式图像裁剪

【英文标题】：Responsive Image cropping

【发布时间】：2013-03-15 05:26:19

【问题描述】：

我一直在尝试为宽度低于 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/

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

【问题讨论】：

您希望它裁剪，还是显示第二张图像，以获得更小的分辨率？

我认为显示较小的图像也可以。

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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

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

或者，您可以使用Pixtulate 等服务为每位访问者即时执行此裁剪。这还可以让您通过预先设置的焦点剪裁偏离中心，并且您的图像的大小将适合每个访问者的屏幕。