响应式图像裁剪正确答案

【问题标题】：Responsive Image Cropped Right响应式图像裁剪正确
【发布时间】：2014-04-30 06:00:06
【问题描述】：

如何实现以下行为？

从宽图像开始，例如1440 像素 x 378 像素。
屏幕宽度 = 1440px+ 图片正常显示。
随着屏幕宽度的减小，图像的右侧（或左右两侧）会被裁剪。
屏幕宽度 = 1024px 图像已完全裁剪，即现在不会进行额外裁剪。
随着屏幕宽度的减小，裁剪后的图像的宽度/高度会像标准响应式图像一样减小，即 img { max-width: 100%; }

【问题讨论】：

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

标签： javascript html css responsive-design

【解决方案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/

【讨论】：

【解决方案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 将控制裁剪的最大数量。

【讨论】：