CODEWITHSUNDEEP
javascripthtmlcss
Georgi Antonov
Georgi Antonov

Reputation: 1641

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

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

Upvotes: 3

Views: 9946

Answers (4)

Amby
Amby

Reputation: 19

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.

Upvotes: 0

HumbleBee
HumbleBee

Reputation: 341

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

Upvotes: 4

Renzo Calla
Renzo Calla

Reputation: 7696

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>

Upvotes: 0

sol
sol

Reputation: 22949

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>

Upvotes: 1

Related Questions