文字与图片剪辑冲突

Question

我被这部分困住了。我的图片是clip-path，但是我的class:txt width由于img而无法伸展。对不起，如果我不能解释清楚的话。英语是我的第三语言，希望您能理解我的印象。

结果

实际图片

    .item1{
	background: url(../img/bg.png);
	background-size: 100%;
	background-repeat: repeat-y;
	padding-left: 40px;
}

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

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

.item .txt h2{
	margin-top: 5px;
	padding-top: 65px;
}

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

Answer 1

这是为什么？?? ..使用flex框将图像放置在文本旁边并使用

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

代替剪切路径

https://codepen.io/Xenio/pen/rRYPoR

.item1{
    background: url(../img/bg.png);
    background-size: 100%;
    background-repeat: repeat-y;
    padding-left: 40px;
    display: flex;
}

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

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

.item .txt h2{
    margin-top: 5px;
    padding-top: 65px;
}

<div class="item1">
    
    <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>
    <img src="https://images.unsplash.com/photo-1548659979-53d6a343b767?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
</div>