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;
}

quick question is this an actual image, or more of a repeating background? — Danimal, Sep 29 '17 at 13:52
it is an actual image ( waves ) the image intention is to be used as background. at the end of an element — Georgi Antonov, Sep 29 '17 at 13:54
becasue i don't think i can use clip-path if needed, i guess for my purpose i have manipulate inline clip-path with javascript based on debounced window resize event — Georgi Antonov, Sep 29 '17 at 13:55
You could use `width: 0%`, but I am not sure this will work, even with `display: flex` — EgMusic, Sep 29 '17 at 13:58
`#header-waves { width: 100%; } #header-waves img { max-width: 100%; }` — GreyRoofPigeon, Sep 29 '17 at 13:58
Have you tried putting a height="300px" attribute in your img tag and put overflow hidden in your css? — Danimal, Sep 29 '17 at 13:59
You could set image as background for #header-waves and set background-size: cover; background-position: center. But I am not sure you get 100% result you want. — David Vareka, Sep 29 '17 at 13:59
Possible duplicate of [how to center and Crop an image to square with CSS](https://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-css) — Jordy Brinks, Sep 29 '17 at 14:02

score 3 · Answer 1 · answered Apr 13 '21 at 19:48

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;
}

score 1 · Answer 2 · answered Sep 29 '17 at 14:00

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>

answered Sep 29 '17 at 14:00

sol

22,311
6
42
59

not working as expected will attach images so that its more clear – Georgi Antonov Sep 29 '17 at 14:11
@GeorgiAntonov Ok, it's difficult to help any further based on an image alone. The website you've linked is calculating height dynamically and is more complex than the snippet. – sol Sep 29 '17 at 14:21
Hi thanks I was able to get this to work for my use case by also applying **object-fit: cover;** to the img element. – Angus Grant Mar 13 '19 at 12:46

score 0 · Answer 3 · answered Sep 29 '17 at 14:03

0

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>

answered Sep 29 '17 at 14:03

Renzo Calla

7,486
2
22
37

I dont want to set height of the .main-content since its an flex element and its height is reproduced relative to its siblings – Georgi Antonov Sep 29 '17 at 14:06

score 0 · Answer 4 · answered Aug 31 '23 at 00:00

Something like this worked for me:

      <img
      src={userImageUrl}
      alt={userName}
      style={{
        borderRadius: "50%",
        width: "50px",
        height: "50px",
        objectFit: "cover",
      }}

I set the height and width both as I needed, and then added added objectFit: "cover" which helped fix it.

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

4 Answers4