使用CSS裁剪图像并将裁剪拉伸至100％

Question

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

剩下的80％需要填写100％的页面宽度，如何？

Answer 1

1. 在<img>附近添加2个包裹。
2. 两侧都有负边距延伸内包装。
3. 在外包装上添加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%;
}

＆＃13;
＆＃13;
.image-container {
  overflow: hidden;
}
.image-container .image-frame {
  margin: 0 -10%;
}
.image-container img {
  display: block;
  height: auto;
  width: 100%;
}
＆＃13;
<div class="image-container">
  <div class="image-frame">
    <img src="http://placehold.it/2200x1000">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

看看上面的图片，这是什么意思？ 黑色部分是你想要展示的部分。

然后你可能会去photoshop甚至痛苦，并切掉10％的双方。