使用 CSS 裁剪和拉伸图像以填充页面 [重复]

Posted 2023-02-25

【中文标题】使用 CSS 裁剪和拉伸图像以填充页面 [重复]

【英文标题】：Crop and stretch image to fill page using CSS [duplicate]

【发布时间】：2018-07-09 16:30:28

【问题描述】：

我想裁剪然后不按比例拉伸图像以填满整个页面。我想这仅通过 CSS 和适当的 DOM 结构是可行的。我不坚持 CSS 解决方案。只要我可以从服务器下载完整尺寸的图像，即使是客户端 javascript 也适用于我。

任何帮助将不胜感激！

一月

【问题讨论】：

Object-fit 可能对你有帮助，ie11 需要 polyfill

jsfiddle.net/8fd4hrvm

【参考方案1】：

你可以使用 CSS clip-path

.clip-me 
  clip-path: inset(10px 20px 0px 0px);
  -webkit-clip-path: polygon(10% 10%, 10% 10%, 10% 10%);

<img class="clip-me" src="https://cdn.sstatic.net/Sites/***/company/img/logos/so/so-logo.png">

This tool 也很有用。