javascript - 响应图像正确裁剪

Question

如何实现以下行为？

1. 从宽幅图像开始，例如1440 像素 x 378 像素。
2. 屏幕宽度 = 1440px+ 图片正常显示。
3. 随着屏幕宽度的减小，图像的右侧(或左侧/右侧)被裁剪。
4. 屏幕宽度 = 1024 像素的图像已被完全裁剪，即现在没有进行额外的裁剪。
5. 随着屏幕宽度的减小，裁剪图像的宽度/高度会像标准响应图像一样减小，即 img { max-width: 100%;

Answer 1

使用背景图片能解决您的问题吗？

.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，根据需要调整图片的大小和位置，如下所示:http://codepen.io/anon/pen/DIAic/