Javascript 反应灵敏的图像被裁剪到右侧

如何实现以下行为

从宽图像开始，例如1440px 378px

屏幕宽度=1440px+图像显示正常

随着屏幕宽度的减小，图像的右侧（或左右两侧）将被裁剪

屏幕宽度=1024px图像已完全裁剪，即现在不再进行其他裁剪

随着屏幕宽度的减小，裁剪图像的宽度/高度减小，就像标准响应图像一样，即img{max width:100%；}

---

使用背景图像可以解决您的问题吗

.image {
  height: 300px;
  width: 40%;
  max-width: 1440px;
  background-image: url('http://kaboomshark.com/wp-content/uploads/2012/03/xbox-logo-600x300.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

然后根据需要设置媒体查询以调整或设置新的背景图像url、图像大小和位置，如：

使用div包装器：

<div class="wrapper">
    <img>
</div>

• 上图

  1440px

  图像将完整显示
• 在

  1024px

  和

  1440px

  之间，它将被裁剪，但以100%比例显示
• 在

  1024px

  下方，它将缩小比例，保持相同区域的裁剪

小提琴：

---

如果确切的宽度不重要，您可以不使用它们，让所有内容自动调整大小。图像上的

max width

将控制最大裁剪量。

请务必阅读选择标签时出现的说明！