How to Crop an Image's Height Without Changing Size and Ratio (React/CSS)

I’m attempting to crop this image in CSS so that the image fills the entire container and stays the same ratio as the original file, without changing the image size any larger than what it needs to fit the container. Just like what photoshop does with the crop tool:

In this example, the images size doesnt change in either direction, and fills the container its in, but the image is cropped on its Y axis:

Heres a video example: https://imgur.com/za9IIIW

Here’s a simple working code example: https://codesandbox.io/s/epic-frog-vkvxp?file=/src/App.js:0-1402

import React, { useEffect, useState, useRef } from "react";
import "./styles.css";
import img from "./img.jpg";

const appContainerStyle = {
  position: "relative",
  height: "100vh",
  width: "100vw",
  backgroundColor: "rgb(70,70,70)"
};

const btnContainerStyle = {
  position: "absolute",
  height: "100%",
  width: "100%",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [height, setHeight] = useState(100);
  const imageStyle = {
    position: "absolute",
    height: `${height}%`,
    width: "100%",
    background: `url(${img})`,
    backgroundSize: "cover",
    backgroundPosition: "top",
    backgroundRepeat: "no-repeat"
  };
  return (
    <div style={appContainerStyle}>
      <div style={imageStyle}></div>
      <div style={btnContainerStyle}>
        <button
          style={{ height: "50px", width: "100px" }}
          onClick={() => {
            height > 0 && setHeight(height - 10);
          }}
        >
          Smaller
        </button>
        <button
          style={{ height: "50px", width: "100px" }}
          onClick={() => {
            height < 100 && setHeight(height + 10);
          }}
        >
          Bigger
        </button>
      </div>
    </div>
  );
}

//image is changing size when the height is changed, 
//I would like for it to stay the same size, but crop when the height is changed

My problem is that it crops the image sometimes fine, but it also sometimes changes the image size.

Any help would be appreciated!

61 thoughts on “How to Crop an Image's Height Without Changing Size and Ratio (React/CSS)”

  1. Wonderful blog! I found it while surfing around
    on Yahoo News. Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Thanks

    Reply
  2. Howdy! This is my first visit to your blog! We are
    a team of volunteers and starting a new initiative in a community
    in the same niche. Your blog provided us valuable information to work
    on. You have done a extraordinary job!

    Reply
  3. Have you ever thought about adding a little bit more than just
    your articles? I mean, what you say is important and everything.

    But think of if you added some great visuals or videos to give your posts more, “pop”!
    Your content is excellent but with images and video clips, this site could definitely be
    one of the greatest in its field. Good blog!

    Reply
  4. Admiring the time and energy you put into your blog and detailed information you offer.
    It’s awesome to come across a blog every once in a while that isn’t
    the same old rehashed material. Wonderful read! I’ve bookmarked your site and I’m including your RSS feeds to my Google account.

    Reply
  5. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my
    blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and
    was hoping maybe you would have some experience with something like
    this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

    Reply
  6. Fantastic blog you have here but I was wanting to know if you knew of any
    message boards that cover the same topics discussed here?
    I’d really love to be a part of group where I can get
    opinions from other knowledgeable individuals that share the same interest.
    If you have any suggestions, please let me know. Thank you!
    quest bars http://tinyurl.com/49u8p8w7 quest bars

    Reply
  7. Greetings I am so happy I found your website,
    I really found you by mistake, while I was browsing
    on Google for something else, Nonetheless I am here now and would
    just like to say thanks for a tremendous post and a
    all round exciting blog (I also love the theme/design),
    I don’t have time to go through it all at the minute
    but I have bookmarked it and also added your RSS feeds,
    so when I have time I will be back to read much more, Please do keep up
    the excellent work. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

    Reply
  8. It’s a shame you don’t have a donate button! I’d without a
    doubt donate to this outstanding blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account.
    I look forward to new updates and will talk
    about this blog with my Facebook group. Talk soon! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply
  9. Hi everybody, here every person is sharing these know-how, thus it’s fastidious
    to read this web site, and I used to pay a quick
    visit this blog daily.

    Reply
  10. Hello! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog post
    or vice-versa? My blog addresses a lot of the
    same topics as yours and I believe we could greatly benefit from each other.
    If you happen to be interested feel free to shoot me an email.
    I look forward to hearing from you! Great blog by the way!

    Reply
  11. I like what you guys tend to be up too. This sort of clever work
    and exposure! Keep up the awesome works guys I’ve included you guys
    to my personal blogroll.

    Reply

Leave a Comment