Search code examples
htmlcsscrop

Crop image and stretch crop to 100% using CSS

I have an image width 2200px. I need to cut 10% left and right.

The remaining 80% need to fill 100% of page width, how to?

Solution
    1. Add 2 wraps around <img>.
    2. Extend inner wrap with negative margin on both sides.
    3. Add overflow: hidden on outer wrap to hide extended part.

    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>