javascript - CSS crop image to fit screen width while keeping the original height of the image - Stack Overflow

admin管理员组

文章数量:1315327

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 : .svg

how I want to be displayed:

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

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

• javascript
• html
• css

Share Improve this question Follow edited Sep 29, 2017 at 14:18 Georgi Antonov asked Sep 29, 2017 at 13:50 Georgi AntonovGeorgi Antonov 1,66111 gold badge2323 silver badges4444 bronze badges 10

• quick question is this an actual image, or more of a repeating background? – Danimal Commented Sep 29, 2017 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 Commented Sep 29, 2017 at 13:54
• Why not add it as a background image with CSS?? – GreyRoofPigeon Commented Sep 29, 2017 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 Commented Sep 29, 2017 at 13:55
• User overflow:hidden property for your img ? – Himan Commented Sep 29, 2017 at 13:57

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 4

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

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>

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

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

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

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.

本文标签： javascriptCSS crop image to fit screen width while keeping the original height of the imageStack Overflow