Html 文本与图像剪辑冲突_Html_Css_Image

Html 文本与图像剪辑冲突

html css image

Html 文本与图像剪辑冲突,html,css,image,Html,Css,Image,我被这部分卡住了。我的图像正在剪辑路径中，但由于img的原因，我的class:txt宽度不会拉伸。如果我不能很好地解释，我很抱歉。英语是我的第三语言，所以我希望你能理解我附上的图片结果真实图像 .item1{ 背景：url（../img/bg.png）；背景大小：100%；背景重复：重复-y；左侧填充：40px； } .1项目1 img{ 浮动：对； -webkit剪辑路径：插入（5%10%15%46%）；剪辑路径：插入（5%10%15%46%）；右边距：-15px；边缘顶

我被这部分卡住了。我的图像正在

剪辑路径

中，但由于

img

的原因，我的

class:txt宽度

不会拉伸。如果我不能很好地解释，我很抱歉。英语是我的第三语言，所以我希望你能理解我附上的图片

结果

真实图像

.item1{
背景：url（../img/bg.png）；
背景大小：100%；
背景重复：重复-y；
左侧填充：40px；
}
.1项目1 img{
浮动：对；
-webkit剪辑路径：插入（5%10%15%46%）；
剪辑路径：插入（5%10%15%46%）；
右边距：-15px；
边缘顶部：20px；
}
.item.txt p{
文本对齐：对齐；
}
.item.txt h2{
边缘顶部：5px；
填充顶部：65px；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

这就是我想要的吗？？。。使用flex box将图像放置在文本旁边，并使用

.item1 img{
 object-fit:cover;
 object-position:center;
}

而不是剪辑路径

.item1{
背景：url（../img/bg.png）；
背景大小：100%；
背景重复：重复-y；
左侧填充：40px；
显示器：flex；
}
.1项目1 img{
对象匹配：覆盖；
对象位置：中心；
}
.item.txt p{
文本对齐：对齐；
}
.item.txt h2{
边缘顶部：5px；
填充顶部：65px；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

这就是我想要的吗？？。。使用flex box将图像放置在文本旁边，并使用

.item1 img{
 object-fit:cover;
 object-position:center;
}

而不是剪辑路径

.item1{
背景：url（../img/bg.png）；
背景大小：100%；
背景重复：重复-y；
左侧填充：40px；
显示器：flex；
}
.1项目1 img{
对象匹配：覆盖；
对象位置：中心；
}
.item.txt p{
文本对齐：对齐；
}
.item.txt h2{
边缘顶部：5px；
填充顶部：65px；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

而不是

剪辑路径

。我建议您使用

width，height&object fit

properties。这不会产生布局问题

.item1 img{
    float: right;
    width: 20%; 
    height: 200px;
    object-fit:cover;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
}

而不是

剪辑路径

。我建议您使用

width，height&object fit

properties。这不会产生布局问题

.item1 img{
    float: right;
    width: 20%; 
    height: 200px;
    object-fit:cover;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
}

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
  .item1 {
      background: url(../img/bg.png);
      background-size: 100%;
      background-repeat: repeat-y;
      padding-left: 40px;
      position: relative;
  }

  .item1 img {
      -webkit-clip-path: inset(5% 10% 15% 46%);
      clip-path: inset(5% 10% 15% 46%);
      margin-right: -15px;
      position: absolute;
      right: 0;
      top: 0;
  }

  .txt {
      padding-right: 280px;
  }

  .item .txt p{
      text-align: justify;
  }

  .item .txt h2{
      margin-top: 5px;
      padding-top: 65px;
  }
</style>
</head>
<body>
  <div class="item1">
      <img src="https://i.stack.imgur.com/YasK2.png">
      <div class="txt">
          <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  </div>
</body>
</html>


文件
.项目1{
背景：url（../img/bg.png）；
背景大小：100%；
背景重复：重复-y；
左侧填充：40px；
位置：相对位置；
}
.1项目1 img{
-webkit剪辑路径：插入（5%10%15%46%）；
剪辑路径：插入（5%10%15%46%）；
右边距：-15px；
位置：绝对位置；
右：0；
排名：0；
}
.txt{
右边填充：280px；
}
.item.txt p{
文本对齐：对齐；
}
.item.txt h2{
边缘顶部：5px；
填充顶部：65px；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
  .item1 {
      background: url(../img/bg.png);
      background-size: 100%;
      background-repeat: repeat-y;
      padding-left: 40px;
      position: relative;
  }

  .item1 img {
      -webkit-clip-path: inset(5% 10% 15% 46%);
      clip-path: inset(5% 10% 15% 46%);
      margin-right: -15px;
      position: absolute;
      right: 0;
      top: 0;
  }

  .txt {
      padding-right: 280px;
  }

  .item .txt p{
      text-align: justify;
  }

  .item .txt h2{
      margin-top: 5px;
      padding-top: 65px;
  }
</style>
</head>
<body>
  <div class="item1">
      <img src="https://i.stack.imgur.com/YasK2.png">
      <div class="txt">
          <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  </div>
</body>
</html>


文件
.项目1{
背景：url（../img/bg.png）；
背景大小：100%；
背景重复：重复-y；
左侧填充：40px；
位置：相对位置；
}
.1项目1 img{
-webkit剪辑路径：插入（5%10%15%46%）；
剪辑路径：插入（5%10%15%46%）；
右边距：-15px；
位置：绝对位置；
右：0；
排名：0；
}
.txt{
右边填充：280px；
}
.item.txt p{
文本对齐：对齐；
}
.item.txt h2{
边缘顶部：5px；
填充顶部：65px；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

好的，如果您想保持图像的裁剪效果，可以这样做：将

设置为

位置：相对和