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

Question

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

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

Answer 1

添加 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>

Answer 2

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

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

那你大概可以去photoshop或者pain把两边都剪掉10%。

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

Crop image and stretch crop to 100% using CSS

html

css

crop