How to crop and center an image with CSS?

I’m still a beginner with CSS and I’m not able to adjust an image as I was request in zeplin.

The original image is quite tall, and in the zeplin the image is cut and shows only the center, with the model in the pic. As you can see in the image below

enter image description here

Can you tell me how to adjust the image in the same way as it is in Zeplin? I put my code into codesandbox.

import "./styles.css";
import Art1 from "./images/art_home_1.png";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div className="images">
        <img src={Art1} alt="" />
      </div>
    </div>
  );
}
.App {
  font-family: sans-serif;
  text-align: center;
}

.images {
  width: 100%;
  max-width: 720px;
  height: 720px;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

Thank you in advance for any help.

Answer

Onother option is to set the image as a background-image so you can use the css propertys like background-position to align the image.

<div className="images" style={{ backgroundImage: `url(${Art1})` }}></div>
background-position: bottom;

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *