CSS Clip-Path Generator 不适合我答案

【问题标题】：CSS Clip-Path Generator not working for meCSS Clip-Path Generator 不适合我
【发布时间】：2021-03-13 00:57:36
【问题描述】：

如何将我的图像放置在正确的位置？我只是直接通过网站从 CSS 路径生成器复制代码。但我无法从 HTML 中的实际图像调整图像大小。我可以知道修复图像所需的代码或任何方法吗？

我的代码脚本

.brazilimg{ 背景图像：url（“图像/巴西.jpg”）；剪辑路径：多边形（20% 0%、80% 0%、100% 20%、100% 80%、80% 100%、20% 100%、0% 80%、0% 20%）；宽度：280 像素；高度：280px；边距顶部：400px；左边距：60px； }

[我的代码脚本][1]

[CSS 剪辑路径生成器][2]

My final outcome after entering the code

The original image that I want to create image clipping

【问题讨论】：

你使用和复制了什么代码？
.brazilimg{ background-image:url("image/brazil.jpg");剪辑路径：多边形（20% 0%、80% 0%、100% 20%、100% 80%、80% 100%、20% 100%、0% 80%、0% 20%）；宽度：280 像素；高度：280px；边距顶部：400px；左边距：60px； }
这是我的代码脚本
粘贴完整的内部问题，
已经修改。请浏览

标签： css clip-path

【解决方案1】：

您的 CSS 正在剪切图像，但图像未在 div 中居中，因此您只获得了顶部。还有一个很大的上边距，这意味着您只能看到顶部，如问题中的图像所示。这是整个剪辑的图像 - 如您所见，只是顶部。

如果我们在 .brazilimg 类中添加一些内容，告诉系统将图像在 div 内居中，剪裁右侧和左侧以保持图像的纵横比，我们会看到正确的图像。 background-size: cover; 是我们添加的。

这是一个在图像居中之前显示问题的 sn-p，但较大的上边距已被注释掉，因此我们可以看到整个图像：

.brazilimg{
 background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
 }

&lt;div class="brazilimg"&gt;&lt;/div&gt;

这是一个添加了封面以集中图像的 sn-p：

.brazilimg{
 background-image:url("https://i.stack.imgur.com/bUUz7.jpg");
 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
 width: 280px;
 height:280px;
 /*margin-top:400px;*/
 margin-left:60px;
  /* added to ensure the image is centrally located */
 /* and make this CSS class more general for different images' aspect ratios */
  background-size: cover;
 }

&lt;div class="brazilimg"&gt;&lt;/div&gt;

【讨论】：