Question

如何实现以下行为？

以宽幅图片开头，例如1440px x 378px。
屏幕宽度= 1440px +图像正常显示。
当屏幕宽度减小时，图像的右侧（或左/右）都会被裁剪。
屏幕宽度= 1024px图像已完全裁剪，即现在不再进行其他裁剪。
当屏幕宽度减小时，裁剪后的图像的宽度/高度会像标准的响应图像一样减小，即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;
}

然后设置您的媒体查询以调整大小或设置新的背景图片网址，大小并根据需要定位图片：http://codepen.io/anon/pen/DIAic/

Answer 2

使用div包装器：

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

.wrapper {
    max-width: 100%;
    width: 1440px;
    overflow-x: hidden;
}

.wrapper img {
    width: 1440px;
    max-width: 140.625%; /* 1440px/1024px = 140.625% */
}

高于1440px，图片将全部显示。
在1024px和1440px之间，它会被裁剪，但会以100％的比例显示。
在1024px下方，它会缩小，保持相同的区域被裁剪。

小提琴：http://jsfiddle.net/MizardX/PB7D5/

如果确切的宽度不重要，您可以将它们关闭并让所有内容自动调整大小。图片上的max-width将控制裁剪的最大金额。

响应式图像裁剪权

2 个答案: