使用 CSS 裁剪图像并将裁剪拉伸到 100%答案

【问题标题】：Crop image and stretch crop to 100% using CSS使用 CSS 裁剪图像并将裁剪拉伸到 100%
【发布时间】：2017-05-08 02:26:00
【问题描述】：

我的图像宽度为 2200 像素。我需要左右削减 10%。

剩下的80%需要填充100%的页面宽度，怎么办？

【问题讨论】：

欢迎来到 Stackoverflow 请阅读How to create a Minimal, Complete, and Verifiable example

标签： html css crop

【解决方案1】：

img with 10% off and the black is what has to be showed

看上面的图片，你是这个意思吗？黑色部分是您想要正确显示的部分。

那你大概可以去 photoshop 甚至痛苦一下，把两边的 10% 都剪掉。

【讨论】：

【解决方案2】：

添加 2 个环绕 <img>。
以负边距在两侧扩展内包装。
在外包装上添加overflow: hidden 以隐藏扩展部分。

HTML：

<div class="image-container">
  <div class="image-frame">
    <img src="http://placehold.it/2200x1000">
  </div>
</div>

CSS：

.image-container {
  overflow: hidden;
}
.image-container .image-frame {
  margin: 0 -10%;
}
.image-container img {
  display: block;
  height: auto;
  width: 100%;
}

.image-container {
  overflow: hidden;
}
.image-container .image-frame {
  margin: 0 -10%;
}
.image-container img {
  display: block;
  height: auto;
  width: 100%;
}

<div class="image-container">
  <div class="image-frame">
    <img src="http://placehold.it/2200x1000">
  </div>
</div>

【讨论】：