响应式图像裁剪

Question

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

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

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

这是我迄今为止一直使用的 HTML：

<div class="container">
    <div class="image-container">
        <img src="https://i.stack.imgur.com/kLxRs.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

在

img

样式上使用

object-fit

属性和

cover

（或

contain

）值：

.image-container {
  height: 180px; /* or any desired height on the parent */
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* cover | contain */
}

<div class="image-container">
  <img src="https://i.imgur.com/H7cpsLK.jpg" alt="Gym cardio training" />
</div>

Answer 2

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

我从来没有使用过或见过任何通过CSS裁剪图像，但你绝对可以在Paint或Photoshop中裁剪图像，上传两个图像，然后用CSS交换你想要显示的图像，并可能使用媒体查询。

Answer 3

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

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

或者，您可以使用 Pixtulate 等服务为每个访问者动态执行此裁剪。这还将使您能够通过预设焦点进行偏离中心的裁剪，并且您的图像尺寸将适合每个访问者的屏幕。