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

Question

我仍然是 CSS 的初學者，我無法按照我在 zeplin 中的要求調整圖像。

原始圖像相當高，在 zeplin 中，圖像被切割並僅顯示中心，圖片中為 model。 如下圖所示

您能告訴我如何以與 Zeplin 中相同的方式調整圖像嗎？ 我把我的代碼放進了代碼sandbox 。

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

預先感謝您的任何幫助。

Answer 1

您可以 position 您的圖像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} alt="" /> </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; }

Answer 2

另一個選項是將圖像設置為background-image ，以便您可以使用 css 屬性（如background-position ）來對齊圖像。

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

background-position: bottom;

Answer 3

您可以擺脫 img 周圍的 div，只需使用 object-fit 屬性即可使圖像覆蓋可用空間。 與處理 position absolute 相比，它具有響應性和更好的實踐。 你的 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} alt="" className="images" />
    </div>
  );
}

Styles.css：

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

您的圖像將響應，它將在小屏幕上充滿，您可以調整圖像className 的 max-width 屬性以獲得您想要的 output 以獲得更大的屏幕。