使用CSS裁剪并拉伸图像以填充页面

Question

我想裁剪然后不成比例地拉伸图像以填充整个页面。我想这仅通过CSS和适当的DOM结构是可行的。我不坚持使用CSS解决方案。只要我可以从服务器下载完整尺寸的图像，甚至客户端JavaScript都对我有用。

任何帮助将不胜感激！

Jan

Answer 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/stackoverflow/company/img/logos/so/so-logo.png">

This tool也非常有用。