如何使用 CSS 裁剪和居中图像？

Posted 2023-02-21

【中文标题】如何使用 CSS 裁剪和居中图像？

【英文标题】：How to crop and center an image with CSS?

【发布时间】：2021-06-05 16:37:23

【问题描述】：

我还是 CSS 的初学者，我无法按照我在 zeplin 中的要求调整图像。

原始图像相当高，在 zeplin 中，图像被切割并仅显示中心，模型在图片中。如下图所示

你能告诉我如何像在 Zeplin 中一样调整图像吗？我将代码放入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  />
      </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;

提前感谢您的帮助。

【参考方案1】：

另一个选项是将图像设置为background-image，这样您就可以使用background-position 等css 属性来对齐图像。

<div className="images" style= backgroundImage: `url($Art1)` ></div>

background-position: bottom;

【参考方案2】：

您可以定位您的图像relative，然后随意移动它。这应该与您上面提供的图像相当准确：

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  />
      </div>
    </div>
  );

.App 
  font-family: sans-serif;
  text-align: center;


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


img 
  position: relative;
  top: -350px;
  width: 100%;
  height: auto;

【参考方案3】：

你可以去掉 img 周围的 div，只使用 object-fit 属性使图像覆盖可用空间。与处理绝对位置相比，它具有响应性和更好的实践。 你的 app.js 看起来像这样：

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

export default function App() 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
        <img src=Art1  className="images" />
    </div>
  );

样式.css：

.images 
  width: 100%;
  max-width: 720px;
  height: 720px;
  object-fit: cover;

您的图像将是响应式的，它会在小屏幕上充满，您可以调整 images className 的 max-width 属性以获得大屏幕所需的输出。