CSS crop image to fit screen width while keeping the original height of the image

Question

I'm trying to display an image (6000px width, 300px height) at the end of the main-content like background image. The image should fit the width of the screen, but keep the origin height.

In other words somehow always crop the image at the center while the width of the x-crop is the screen width size and height crop is the origin height of the image.

I have made the image with 6000px width so that I can fit all the screens.

the code below does not work as expected its obvious, it just display the original img while scaling the height to keep the aspect ratio relative to the screen width.

newnewwaves.svg : http://svgshare.com/i/3DT.svg

how I want to be displayed: https://ibb.co/e80Ddw

HTML:

<div class="main-content">
       ...content
        <div id="header-waves">
            <img src="/assets/images/newnewwaves.svg" alt="">
        </div>
 </div>

CSS:

.main-content {
   position: relative;
}
#header-waves {
   position: absolute;
   left: 0;
   bottom: 0;
}
#header-waves img {
  width: 100%;
  height: auto;
  display: block;
}

Answer 1

You could place the image in a container with width: 100% and set the overflow property to hidden.

Use flexbox to center the image within this container.

Note that this snippet is easier to test if you make it full screen and resize the browser...

 #header-waves { width: 100%; overflow: hidden; display: flex; justify-content: center; }

 <div class="main-content"> <div id="header-waves"> <img src="https://placehold.it/6000x300" alt=""> </div> </div>

Answer 2

Try this:

.img-class {

    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    object-fit: cover; 
}

This will help in maintaining aspect ration by restricting the width and cropping the image to center it.

If that doesn't work, Please try this :

.img-class {
  width: 100%;
  height: 400px; /* Set your fixed Limit */
  background-size: cover;
}

Answer 3

You can do it using background: url(...), like the example..

 .main-content { background: url('http://via.placeholder.com/6000x300'); background-size: auto 100%; width:100%; height:300px; }

 <div class="main-content"> ...content </div>