Photoshop Question posted in
The official user guide can be found here.

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

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 from the bottom to the top:

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.

The image shouldn’t scale in its container, it should only be cropped in the window.

Here’s a flawed approach: stillscales

As you can see, the image is cropped until it reaches a point where the image is then being scaled in its container.

Any help would be appreciated!

Tags:

2

Answers


  1. 0

    Change the backgroundSize: "cover" to backgroundSize: "150%".

    const imageStyle = {
  position: "absolute",
  height: `${height}%`,
  width: "100%",
  background: `url(${img})`,
  backgroundSize: "150%",
  backgroundPosition: "top",
  backgroundRepeat: "no-repeat",
};

    Codesandbox: https://codesandbox.io/s/admiring-buck-89pv4

    Login or Signup to reply.
  2. 0

    create an image container with overflow of hidden so this way when you move image it won’t show the outside of box.

    then you have to set the image position to relative. this helps to move the image from its position without breaking the design.

    after that you can give the image left, right, top and bottom positions to set the image position and the overflow will be hidden.

    the html:

    <div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
</div>

    the css:

    .image-container {
  overflow: hidden;
}

.image-container img {
  position: relative;
  top: -100px;
}

    this is how you crop the image if you need more help ask in the comment for react code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search