конфликт текста с изображением клипа - PullRequest
Новая
       2

конфликт текста с изображением клипа

0 голосов
/ 13 марта 2019

Я застрял с этой частью.Мое изображение clip-path, но мое class:txt width не растянется из-за img.Извините, если я не могу объяснить это хорошо.Английский - мой третий язык, поэтому я надеюсь, что вы понимаете изображение, которое я прилагаю.

Результат

enter image description here

Фактическое изображение

enter image description here

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

Ответы [ 4 ]

1 голос
/ 13 марта 2019

Хорошо, возможно, что-то вроде этого, если вы хотите сохранить изображение обрезанным: Установите <div class="item1"> на position: relative и <div class="txt"> на position: absolute, затем рассчитайте ширину <div class="txt"> на основе ширины изображения. (И на всякий случай, возможно, установите z-index: 1 или выше для вашего текстового div, чтобы он никогда не появлялся «за» изображением?) 

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

.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;
}

.txt {
    width: calc(100% - 300px);
    margin-top: 20px;
    position: absolute;
    left: 0;
    z-index: 1;
}

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

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

Вот ссылка на jsfiddle

1 голос
/ 13 марта 2019

Попробуйте это 

<!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>
0 голосов
/ 13 марта 2019

вместо clip-path. Я предлагаю вам использовать width, height & object-fit свойства. Который не создает проблему макета. 

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

https://codepen.io/moorthy-g/pen/NJwomY

0 голосов
/ 13 марта 2019

это как хочешь ?? .. использовал flex box для размещения изображения рядом с текстом и использовал 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...